computed

核心： 依赖缓存而改变

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

实现用computed代替watch的地方：

• 1.data => computed

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

demo

<template>
  <div>
    <h4>测试computed</h4>
    <div>
      <input type="text" v-model="message" />
      <span>{{defdata}}</span>
    </div>
    <div>setter</div>

  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
       def () {
         return 'dfd'
       },
       defdata () {
         console.log(this.message) // message被改变的时候，这里会被执行；并重新赋值defdata变量
         return 'dfd' +this.message
       }
     }
  }
</script>

• 2.Computed => data ×

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

demo computed不能监听computed的变化

<template>
  <div>
    <h4>测试computed</h4>
    <div>
      <input type="text" v-model="abc" />
      <span>{{def}}</span>
    </div>
    <div>setter</div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
       abc () {
         return 'abc'
       },
       def () {
         console.log(this.abc)  // 这里不会被执行并重新赋值def变量
         return 'dfd' +this.abc
       }
     }
  }
</script>

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

<template>
  <div>
    <h4>测试computed的get</h4>
    <div>
      <input type="text" v-model="message" />
      <div>{{abc}}</div>
    </div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
       abc: {
         get () {
           // 监听data的变化，每次变化都会打印123
           console.log(123)
           // abc随着    data中的message的变化而变化
           return 'abc' + this.message
         }
       }
     }
  }
</script>

<style>
</style>

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

<template>
  <div>
    <h4>测试computed的set</h4>
    <div>
      <input type="text" v-model="abc" />
    </div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
       abc: {
         get () {
           return 'abc'
         },
         set (val) {
           //  只能在set函数里面打印改变后的值
           console.log('set', val)  // => 123
         }
       }
     },
     mounted () {
       this.abc = '123'
       // 在mounted 无法打印改变后的值
       console.log('mounted', this.abc) //=> abc
     }
  }
</script>

<style>
</style>

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

<template>
  <div>
    <h4>测试computed的缓存</h4>
    <div>{{now}}</div>
  </div>

</template>

<script>
   export default {
    data () {
       return {
         message: 'hello'
       }
     },
    computed: {
      now:{
        get:function(){
          return Date.now() + this.message
        },
        cache: true   // 默认是true
      }
    },
    mounted () {
      for(let i = 0 ;i<3;i++){
        console.log(this.now)  // 当false关闭缓存的时候，每次访问now是都是最新的的。 而为true的时候，则需要依赖的属性改变了才会更新时间；
      }
    }
  }
</script>

<style>
</style>

• 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