0x3 精读Vue官方文档 – 计算属性与侦听器

计算属性

替代复杂的模板表达式

将模板中复杂的表达式计算移动到计算属性中，让模板更易于维护。

计算缓存

计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。也就是说多次调用计算属性，如果响应式的值没有发生改变，则计算属性会直接返回上一次计算的结果，如果不需要缓存，可以使用方法（methods）进行替代，因为方法每次调用，总是会重新执行。

<div>
    <p>
      {{ getRandomChar(random) }}
    </p>
    <p>
        <!--时间戳不会发生改变-->
       {{ timeStamp }}
    </p>
    <button @click="getRandom()">getRandomChar</button>
  </div>
</div>
复制代码

{
  data() {
    return {
      random:0,
    };
  },
  created(){
    this.getRandom();
  },
  methods: {
    getRandom() {
      this.random = ~~(Math.random() * 255);
    },
    getRandomChar(value) {
      return String.fromCharCode(value);
    },
  },
  computed: {
    timeStamp() {
      return Date.now();
    },
  },
}
复制代码

setter 与 getter

计算属性默认只有 getter，但是我们也可以为计算属性设置 setter。
计算属性的值是依赖于一个或多个响应式数据，那么当计算属性发生改变时，通过设置 setter 就可以去改变所依赖的一个或多个响应式数据。

{
    data(){
        return {
            firstName:'',
            lastName:''
        }
    },
    computed:{
        fullName:{
            get:function(){
                return this.firstName + ' ' + this.lastName;
            },
            set:function(newValue){
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }
}
复制代码

计算属性的 getter 或 setter 方法内部可以访问 vue 实例。

侦听器

当需要在数据变化时执行异步或开销较大的操作时。
使用的方式既可以是 optionsAPI 提供的 watch 属性，也可以使用组件实例中的 vm.$watch() 方法。

计算属性与侦听器的区别

计算属性

计算属性的目的是为了求值，主要用于多个响应式数据结合产生一个计算属性数据的场景下，或者说一个（计算属性）数据受多个（响应式）数据影响的场景下。

一个数据受多个数据影响，可用于优化模板中的复杂表达式。

侦听器

侦听器的主要功能是监听数据变化，执行一些操作或副作用。
侦听器主要用于一个数据的改变会影响多个数据的场景中。

一个数据影响多个数据。

如果只是单纯的监听数据改变来影响其它多个数据，那么使用 setter 与 getter 的计算属性也可以做到，但是监听器的另一个特点就是被设计为可以执行一些副作用。