computed使用详解（附demo,不定期更新）

computed

核心： 依赖缓存而改变

基础用法：1.get：依赖缓存，监测data数据的变化；2.set:监测computed本身数据的变化 。3，关闭cache:每次访问都是最新的而非缓存；
注意：vuex传递的computed值必须通过watch才能监测到，set函数无法监测到

实现用computed代替watch的地方：

• 1.data => computed

  data数据改变,computed因改变而改变;而不会用watch; √
  监听data的变化

demo

• 2.Computed => data ×

  computed不能监听computed的变化(注意：即使使用set，也改变不了computed的值，只能改变data;)
  监听computd的变化用set/watch

demo computed不能监听computed的变化

• 3.computed的get是设置监听data的数据；

4.computed的set函数
set函数当computed属性重新赋值后，set里的操作会被调用。
注：需要改变computed的值的时候，就需要设置set函数

• 5. Cache :true 默认开启计算属性的缓存； 如果需要每次访问都是最新的则关闭缓存false;
     demo

• 6. watch能用而computed的set不能用的地方；
     vuex 接收 的computed ，用set监测不到变化，必须要用watch才可以生效；（原理：实质没有改变computd的值，只是改变了get的return值）
     v-model 改变的computed，用watch监测不到变化，必须要用computed对象中的set函数方法才能监测得到（原理：相当于每次改变了computed的值）

7. 写法规范：
   vuex 传递的computed值

computed: {
     abc  () {
          return 'vuex
    }
 }

自身computed定义

computed: {
    abc: {
      get () {
          return 'computed'
      }
    }
}

参考链接

• heightzhang github demo