vue正确使用watch监听属性变化方式
Vue中可以使用监听器监听属性的变化，并根据属性变化作出响应。但一旦涉及到复杂数据的监听（如Object，但数组一般不需要，因为Vue针对数组做了特殊处理）时就比较复杂了，本文解释了使用watch监听属性变化的方法，包括复杂数据。
基本用法
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的基本用法很简单：针对需要监听的属性定义个同名的函数即可，函数的第一个参数为变化后的值，第二个参数为变化前的值。
监听object
首先我们回顾一个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变化（地址没变）。那如果想要监听到这个变化应该怎么办呢？一般来说有两种方式：
使用deep参数
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可以监听属性的变化，且其使用方式也不少，理解每种方式的使用场景能为开发节省时间，优化性能。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vite+vue3项目解决低版本兼容性问题解决方案(Safari白屏)
这篇文章主要介绍了vite+vue3项目解决低版本兼容性问题（Safari白屏）,使用官方插件 @vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持,本文给大家介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了vue实现导航栏下拉菜单，带展开收缩动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
viewer.js是一款开源的图片预览插件,功能十分强大,本文主要介绍了vue3中使用viewerjs实现图片预览效果的项目实践,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
这篇文章主要介绍了Vue.extend 和 data的合并策略 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了Vue的mixin策略的相关资料，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-11-11
这篇文章主要为大家介绍了Vue首屏时间指标采集最佳方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家详细介绍了vue实现列表的添加点击，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了将vue的项目打包后通过百度的BAE发布到网上的流程,主要运用的技术是vue+express+git+百度的应用引擎BAE。需要的朋友可以参考下2018-03-03
本篇文章主要介绍了karma+webpack搭建vue单元测试环境的方法示例，这次搭建的测试环境和开发环境隔离，所以理论上适用所有使用vue的开发环境。感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要给大家介绍了关于vue打开其他项目页面并传入数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
最新评论