1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之计算属性、方法和侦听器

Vue教程之计算属性、方法和侦听器

计算属性

为什么要是用计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要将变量 message 的值进行翻转。当你想要在模板中,多次使用此种方式翻转字符串的时候,就会变的更加难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性。

什么是计算属性

计算属性,就是用来声明式的描述一个值依赖了其它的值。

当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。

计算属性是有一定的缓存策略的,只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 依赖的值 还没有发生改变,多次访问 对应的计算属性,则计算属性会立即返回之前的计算结果,而不必再次执行函数。

实例演示

setter

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter,也就是设置直接设置计算属性的值:

实例演示

方法

我们定义一个方法,通过插值表达式去调用这个方法,那么则不管数据是否有变动则每次都会执行。

如果你不希望有缓存的情况出现的时候,可以使用方法代替计算属性。

侦听器

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

同时侦听器和计算属性相同的是,也是具有一定的缓存特性。

实例演示:

这篇文章对您有用吗?

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注