计算属性与监视属性

计算属性与监视属性

计算属性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);
​
•    }
​
   }

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

__EOF__

本文作者：嘿先生
本文链接：https://www.cnblogs.com/liujis/p/15982091.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！