Vue - watch和computed区别及实现

用法

let vm = new Vue({
        el: "#app",
        data: {
          name: "mino"
        },
        computed: {
          fullname() {
            return this.name;
          }
        },
        watch: {
          name: {
            handler(newValue) {
              console.log(newValue);
            },
            immediate: true, // 立即执行handler
            deep: true, // 深度监控
            lazy: true  // 加上lazy就是compouted的实现
          }
        }
});
console.log(vm);

区别

watch中的函数是不需要调用的

computed内部的函数调用的时候不需要加()

watch  属性监听 监听属性的变化

computed:计算属性通过属性计算而得来的属性

watch需要在数据变化时执行异步或开销较大的操作时使用

对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性computed。 

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

computed中的函数必须用return返回最终的结果

当computed中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取

watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；

使用场景

computed 　 当一个属性受多个属性影响的时候就需要用到computed

watch            当一条数据影响多条数据的时候就需要用watch

实现

watch

function initWatch(watch){
  for(let key in watch){
     vm.$watch(key,watch[key]);
  }
}
// 调用
initWatch({
   name(newValue) {
      console.log(newValue);
   }
});
vm.name = "mino"; //打印  mino

computed

let dirty = true;
function initComputed(key, handler) {
    let value;
    Object.defineProperty(vm, key, { 
        get() {                      
           if (dirty) {
              value = handler();
              dirty = false;
            }
            return value;
        }
    });
}
initComputed("fullname", () => {
    console.log("update");
    return vm.name + "test";
});
// 计算属性特点 可以缓存
vm.name = "mino";
dirty = true;
console.log(vm.fullname);