watch监听的基本用法是什么,怎样监听object
Admin 2022-09-05 群英技术资讯 325 次浏览
Vue watch最重要的使用场景是根据某属性的变化执行某些业务逻辑:
<template>
<input type="number" v-model.number="counter" />
</template>
<script>
export default {
name: "Counter",
data: function() {
return {
counter: 0,
};
},
watch: {
counter: function(newV, oldV) {
console.log('counter change to %d from %d', newV, oldV);
},
}
};
</script>
watch的基本用法很简单:针对需要监听的属性定义个同名的函数即可,函数的第一个参数为变化后的值,第二个参数为变化前的值。
首先我们回顾一个JavaScript中的概念:复杂数据变量。“复杂”的原因在于变量只是一个引用,和C++中的指针类似,其保存的不是真实的数据,而是数据的地址。
比如对于一个object变量来说,添加属性、删除属性、修改属性的值都不会改变这个地址,这也可以说这个object变量没有变化。
不管所用的框架如何,基本定理肯定是生效的,所以Vue中监听object也是一难题,特别是嵌套数据的监听。
这里的变化指的是地址的变化,能够触发变化最简单的方式就是重新赋值。
<template>
<div>
<label>up trigger {{ counter.up }} times</label>
<button @click="onTrigger('up')">Trigger Up</button>
<br>
<label>down trigger {{ counter.down }} times</label>
<button @click="onTrigger('down')">Trigger down</button>
</div>
</template>
<script>
export default {
name: "Counter",
data: function() {
return {
counter: {
up: 0,
down: 0,
},
};
},
methods: {
onTrigger: function(type) {
this.counter[type] += 1;
}
},
watch: {
counter: function(newV, oldV) {
// 不会被触发
console.log('counter change to %o from %o', newV, oldV);
},
}
};
</script>
针对counter的监听不会被触发,因为this.counter[type] += 1;并不会使this.counter变化(地址没变)。那如果想要监听到这个变化应该怎么办呢?一般来说有两种方式:
watch: {
counter: {
handler: function(newV, oldV) {
console.log('counter change to %o from %o', newV, oldV);
},
deep: true,
}
}
使用deep需要使用watch的完整形式:handler是监听回调函数,deep: true指定了不仅仅监听counter的变化,也监听其内部属性的变化,所以当counter.up或counter.down变化时才能出发handler回调。
methods: {
onTrigger: function(type) {
// 重新赋值触发变化
this.counter = {
...this.counter,
[type]: this.counter[type] + 1,
};
}
},
watch: {
counter: function(newV, oldV) {
// 不会被触发
console.log('counter change to %o from %o', newV, oldV);
},
}
那两种方式优劣如何呢?使用deep参数会为数据每一层都添加监听,当层级较深时比较耗费性能,而且Vue不能监听到属性的添加或删除。
所以一般来说使用重新赋值的方式是较优的方案,但如果只是想监听内部嵌
套数据的话,重新赋值就比较重了,所以Vue也提供了直接监听嵌套属性变化的途径:
watch: {
'counter.up': function(newV, oldV) {
console.log('counter.up change to %d from %d', newV, oldV);
},
'counter.down': function(newV, oldV) {
console.log('counter.down change to %d from %d', newV, oldV);
},
}
通过这种方式可以避免使用deep造成的性能消耗问题,当只对某内部属性变化作出响应的场景下比较合适,但仍要注意监听的路径数据仍是复杂数据时的场景。
使用watch监听变化时,给变量初始值不会触发监听函数,如果像要改变这个默认设定可以使用immediate参数,其用法和deep类似:
watch: {
counter: {
handler: function(newV, oldV) {
console.log('counter change to %o from %o', newV, oldV);
},
immediate: true,
}
}
这样在赋初值时就会触发监听函数,其中第一个参数为初始值,第二个参数为undefined。
使用watch可以监听属性的变化,且其使用方式也不少,理解每种方式的使用场景能为开发节省时间,优化性能。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本篇文章给大家带来了关于JavaScript中单线程和异步的相关知识,希望对大家有帮助。
这篇文章主要介绍了JavaScript二叉树及各种遍历算法详情,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
NgModule 模块是Angular种一个重要的点,因为Angular的基本构造块就是NgModule。本篇文章就来带大家了解一下Angular中的NgModule模块,希望对大家有所帮助!
跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据,下面这篇文章主要给大家介绍了关于VUE跨域详解以及常用解决跨域的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
这篇文章主要介绍了Javascript闭包的使用场景, 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部变量的函数。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁,下面一起进入文化在哪个了解文章内容
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008