计算属性与监视属性

计算属性与监视属性

计算属性computed：

通过已有属性计算出来的属性

示例：

computed: {
    
•    demo: {
    //初次读取或所依赖的数据发生改变时get函数会被调用 放回的值就是计算属性的值
•     get() {
​
•      return num * 10;
​
•     },
    //计算属性demo被修改时会调用 参数value为修改后的值 
•     set(value) {
​
•      console.log(value);
​
•     }
​
•    }
​
   }

计算属性的简写形式

computed: {
    //计算属性不用修改时，可简写 相当于get
•    demo() {
​
•     return num * 10;
​
•    }
​
   }

总结：与methods实现相比，计算属性内部有缓存机制（复用），效率更高，调试方便。

监视属性watch：

示例

watch: {
​
•    num: {
​
•     immediate:true, //初始化就调用handler，默认为false
​
•     deep: true,//开启深度监视，默认为false
​
•     handler(newValue,oldValue){// 当num发生改变时调用
​
•      console.log('num被修改了',newValue,oldValue);
​
•     }
​
•    }
​
   }

监视属性的简写形式：

watch: {
​
•    num(newValue,oldValue) {
​
•     console.log('num被修改了',newValue,oldValue);
​
•    }
​
   }

总结：计算属性能实现的功能监视属性一定能实现