1 computed属性的实现原理


  1. Vue实例初始化时,给data的每个属性(dataKey)都添加getter和setter方法
  2. 计算属性computed初始化时,提供的函数将作为对应属性(computedKey)的getter方法
    其中,
    computedKey: function(){
        return this.dataKey+'change'
     }
  1. 当首次获取计算属性的值是,dep开始收集依赖,即收集到dataKey和computedKey的依赖关系
  2. 在dataKey变化时,此时会调用dataKey的getter方法,通过dep收集的依赖,可以判定出data与computed对应数据的依赖关系
  3. 此时可以做到,在data发生变化时,computed属性数据也发生变化

2.computed属性的用法


目的:为了避免模板中加入太多的计算公式,不够精炼明了

简单用法:

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

在模板文件中,只需要写reversedMessage即可,它与message是有依赖关系的。

3.computed属性与watch的区别


  1. 当需要数据在异步变化或者开销较大时,执行更新,使用watch会更好一些;而computed不能进行异步操作;
  2. computed可以用缓存中拿数据,而watch是每次都要运行函数计算,不管变量的值是否发生变化,而computed在值没有发生变化时,可以直接读取上次的值

4.computed属性与methods的区别


  1. 在模板文件中,computed属性只需要写{{reverseMessage}},而methods需要写成{{reverseMessage()}},最明显的区别就是methods是方法,需要执行;
  2. computed属性只有在依赖的data放生变化时,才会重新执行,否则会使用缓存中的值,而methods是每次进入页面都要执行的,有些需要每次进入页面都执行的方法,需要使用methods,而computed属性比较节约。

参考文献

原理:https://segmentfault.com/a/11...
用法:https://cn.vuejs.org/v2/guide...

本文固定链接: http://www.js-code.com/vue-js/vue-js_26298.html