vue中的computed属性

2024年3月30日 121次阅读 来源: 晴雨稀兮

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…

    原文作者：晴雨稀兮
    原文地址: https://segmentfault.com/a/1190000015070628
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞