Vue 计算属性

在双向绑定数据和表达式时，由于表达式过长或者逻辑过于复杂，使数据表达式臃肿难以阅读和维护。

所有的计算属性以函数的形式定义在 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 取决于是否需要缓存。