v-bind 动态绑定style
计算属性 computed
computed区别于method的两个核心
在官方文档中,强调了computed区别于method最重要的两点
- computed是属性调用,而methods是函数调用
- computed带有缓存功能,而methods不是
- computed定义的方法我们是以属性访问的形式调用的,
{{computedTest}}
- 但是methods定义的方法,我们必须要加上
()
来调用,如{{methodTest()}}
,否则,视图会出现test1
的情况,见下图 - 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要
text
还没有发生改变,多次访问getText
计算属性会立即返回之前的计算结果,而不必再次执行函数。而方法只要页面中的属性发生改变就会重新执行 - 对于任何复杂逻辑,你都应当使用
计算属性
- computed依赖于data中的数据,只有在它的相关依赖数据发生改变时才会重新求值
computed 的getter 和 setter
计算属性一般没有set的方法,为只读属性
但也可以写set方法