Vue中的计算属性

什么是计算属性

计算属性是Vue中的一种强大的技术，可以用来从其他实例属性或者一些复杂的表达式中计算出新的变量值。这些变量的值会在实例的数据发生变化的时候自动更新，而且只要依赖的属性发生变化，它们的值也会及时更新。

如何使用

1.在你的Vue实例里，添加computed属性，其值应该为一个对象，每个属性都代表一个计算属性，其值是一个函数。在函数内，你可以使用this对象来引用实例对象里的属性，以及它本身的一些方法。

// 实例化Vue
new Vue({
   data:{
      a:1,
      b:2
   },
   computed:{
      c(){
         return this.a + this.b
      }
   }
})

2.实例化Vue之后，在你的模板或者实例变量里可以直接引用该计算属性。

<!-- 模板里的绑定语法 -->
{{ c }}

// 实例里的引用
console.log(this.c)

3.每当对计算属性依赖的属性发生变化时，计算属性的值也会改变，而不管你是在模板里使用它，还是在实例里使用它。

完整例子：

<div id="app">
   <input type="text" v-model="a"> + 
   <input type="text" v-model="b">
   <p>计算结果：{{c}}</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 2
},
computed: {
  c(){
    return this.a + this.b
  }
}
})
</script>

注意事项

1. 不要在计算属性内部修改实例属性

计算属性的返回值会被缓存，只有在它的依赖发生变化时才会重新计算，如果在计算属性里修改其依赖的属性，那它就会失去它的缓存，因此可能会导致性能问题，因而我们不建议你在计算属性里修改实例属性。

2. 不要让计算属性依赖过多的值

如果一个计算属性依赖过多的值，它就会在响应式系统里产生一个过高的复杂度，因而我们不建议你在计算属性里依赖过多的值，如果你的逻辑的复杂度过高，你可以考虑将其封装成一个方法来代替计算属性。

总结

Vue中的计算属性既方便又强大，让我们可以通过计算属性的值及时的更新，而不必手动的调用实例方法，但计算属性应该尽可能的精简，而不是尽可能的复杂，因为复杂的计算属性会影响性能，所以我们应该合理使用它。