在双向绑定数据和表达式时,由于表达式过长或者逻辑过于复杂,使数据表达式臃肿难以阅读和维护。
所有的计算属性以函数的形式定义在 computed 中,依赖于本实例或者多个实例 data 中的数据,一个计算属性里可以完成各种复杂的逻辑(运算和函数调用等),并返回最终的计算结果。
只要其中任一数据变化,计算属性就会重新执行,视图也会更新
计算属性用法
computed: {
computed1: function() {
...
// 当然这里也可以是更复杂的逻辑
return this.msg + '--这是计算属性1依赖的msg'
},
computed2: {
get: function() {
...
// 当然这里也可以是更复杂的逻辑
return this.msg + '--这是计算属性2依赖的msg'
},
set: function(newValue) {
...
// 当然这里也可以是更复杂的逻辑
this.msg = newValue
}
}
}
上面的代码示例中简单展示了两种计算属性的用法,第一种没有提供 getter 函数和 setter 函数,默认方法为 getter 函数;而第二种提供了一个 getter 函数读取数据和一个 setter 函数来修改操作数据,执行一些自定义操作。
计算属性缓存
调用 methods 也可以与计算属性起到相同的作用,但是只要页面重新渲染,方法就会重新执行。
计算属性是依赖于缓存,只要是其依赖的数据没有变化,则计算属性不会发生变化。
methods 中定义的方法可以接受参数,使用起来更灵活;而计算属性是基于依赖缓存的,只有所依赖的数据发生变化时,才会重新取值,只要依赖数据不发生改变,计算属性就不会发生更新。使用 methods 还是 computed 取决于是否需要缓存。