本篇内容介绍了“怎么使用Vue watch侦听对象属性”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
Vue 的 watch 侦听器格式有两种：方法格式和对象格式的侦听器。
方法格式的侦听器只能监听简单数据类型，如：Number、String、… 无法监听对象属性的变化，也不能在进入页面时，自动触发；
对象格式的侦听器可以监听对象属性的变化。在一定条件下，载入页面时，也可监听数据变化；
1.键名分割，监听对象的某一个属性变化；
属性名通过 . 与对象分割，并通过引号包裹，可以监听对象的某一个属性
data() {
return {
obj:{
name:'andy',
age:18
}}},
watch:{
'obj.name'(newval.oldval) {
// 代码实现
}
}2.computed + watch，监听对象的某一个属性变化；
computed:{
ageVal() {
return this.obj.age;
}
}
watch:{
ageVal(newval,oldval) {
// 代码实现
}
}3.deep 深度监听，监听对象的所有属性变化；
deep：true 开启深度监听，任意属性的属性值变化，都会触发 deep 深度监听；
deep 深度监听只能获取到最新值；
不推荐 deep 深度监听，容易造成页面卡顿，因为deep 深度侦听需要遍历被侦听对象中的所有嵌套的属性；
obj:{
handler(val) {
// 代码实现 val 值是 obj 整个对象
},
deep:true // deep 为 true 时，开启深度监听
// immediate:false 当immediate 值为 true 时，刚载入页面时，也可监听数据的变化
}“怎么使用Vue watch侦听对象属性”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
