vue computed用法

Vue.js中有一个非常重要的概念就是计算属性（computed properties）。computed可以用来处理一些比较复杂的逻辑，也可以用来缓存一些需要多次调用的数据。

computed实际上是监听了数据的变化，如果数据发生改变，那么computed就会重新计算，返回新的值。computed的特点是其值是具有缓存性的，如果计算属性所依赖的数据没有发生改变，那么computed的值就不重新计算。

computed定义：

computed:{
result: function(){
return this.number * 2
}
}

这里的result是一个计算属性，它依赖于data中定义的number数据，返回值则是number*2。

computed的用法：

① 计算属性可以依赖一个或多个数据属性

computed:{
sum: function () {
return this.a + this.b
},
diff:function(){
return this.a - this.b
}
}

这里定义了两个计算属性sum和diff，它们都依赖于数据属性a和b。

② 计算属性可以通过setter/getter对某个数据进行操作

computed:{
fullName:{
get: function(){
return this.firstName + ' ' + this.lastName
},
set: function(newValue){
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

通过setter/getter，计算属性fullName实际上是对firstName和lastName进行了操作。

总的来说，computed的应用场景是当需要依赖一个或多个数据属性进行复杂计算时使用，也可以用于缓存一些需要多次进行计算的数据。computed实现了数据的自动更新，使得应用程序变得更加简单高效。