vue 计算属性

    通常我们在模板内的表达式计算,他非常便利,简单运算还可以,但是复杂运算就变的很臃肿,难以维护。于是对于任何复杂逻辑,都应当使用计算属性。例如:

<div id="example">
  <p>{{ msg }}</p>
  <p>{{ myMsg }}</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    msg: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    myMsg: function () {
      // `this` 指向 vm 实例
      return this.msg.split('').reverse().join('')
    }
  }
})

     vm.myMsg 依赖于 vm.msg,因此当 vm.msg 发生改变时,所有依赖 vm.myMsg 的绑定也会更新。已经以声明的方式创建了这种依赖关系:计算属性的 getter 函数是没有副作用 (side effect) 的,这使它更易于测试和理解。

###计算属性缓存
    上面说到计算属性是基于依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 msg 还没有发生改变,多次访问 myMsg 计算属性会立即返回之前的计算结果,而不必再次执行函数。

    为什么需要缓存?假设有一个性能开销比较大的计算属性 A,它需要做大量的计算。然后可能有其他的计算属性依赖于 A 。如果没有缓存,将不可避免的多次执行 A 的 getter!如果不希望有缓存,请用方法来替代。

计算属性和watch

    我们在项目中经常使用watch,但是有的时候使用计算属性比watch更好,假如我监听a和b来改变c的状态,需要即监听a又监听b,但是用计算属性就好多了,计算c依赖于b和a,两者中任意一个改变都会重新计算a,这样就省事多了。

你可能感兴趣的:(vue,vue,javascript,前端)