watch 监听属性
用于监听data中数据值所产生的改变
使用方法:在export default中写下 watch方法
监听事件中直接书写你需要监听的对象 ,其中可以使用的形参有newval与oldVal
export default {
data() {
return { num: 20 };
},
watch: {
//第一种格式
//直接使用需要监听的函数化为对象
num(newVal, oldVal) {
console.log("num的值产生了改变", newVal, oldVal);
},
//第二种格式
num: {
//固定的函数名称为handler,而此时需要监听的对象名就化成对象
handler(newVal, oldVal) {
console.log("num的值产生了改变", newVal, oldVal);
},},},};
立即监听与深度监听
-
立即监听 页面刷新的时候能够监听到num数据从undefined变成指定值的过程
-
普通监听无法一进入页面就开始监听,需要进行事件操作,而立即监听一进入网页就可以监听到
-
深度监听,获取不到新值与旧值,但是能获取到对象中某个属性被更改时而触发
watch: {
Obj: {
handler(newVal, oldVal) {
console.log("num的值产生了改变", newVal, oldVal);
},
deep: true, //深度监听
immediate: true, //立即监听
},},
注: 一般不推荐直接监听整个对象,建议监听对象中某个而具体的属性
"obj.name": {
handler(newVal, oldVal) {
console.log("数据被改变了", newval, oldVal);
},
Watch与Computed的区别
-
watch中的函数是不需要调用的,computed内部的函数调用的时候不需要加()
-
watch(属性监听),监听的是属性的变化,而computed(计算属性),是通过计算而得来的数据
-
watch需要在数据变化时执行异步或开销较大的操作时使用,而对于任何复杂逻辑或一个数据属性,在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性computed。
-
computed 属性的结果会被缓存,且computed中的函数必须用return返回最终的结果
-
watch 一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;
Watch与Computed的使用场景
-
computed
-
当一个结果受多个属性影响的时候就需要用到computed
-
最典型的例子: 购物车商品结算的时候
-
-
watch
-
当一个数据的变化需要有额外操作的时候就需要用watch
-
搜索数据
-
-
总结:
-
一个值的结果受其他值的影响,用computed
-
一个值的变化将时刻影响其他值,用watch
-
watch擅长处理的场景:一个数据影响多个数据 (一般用于异步或者开销较大的操作) 监听到数据的变化,去指定响应的操作 computed擅长处理的场景:一个数据受多个数据影响 (对于任何复杂逻辑,你都应当使用计算属性)
标签:computed,watch,oldVal,num,监听,属性 From: https://www.cnblogs.com/Dollom/p/16856815.html