vue3的watch用法及和vue2中watch的区别是什么
更新时间：2023-12-13
**前言**
Vue.js是一个用于构建用户界面的渐进式JavaScript框架。版本2中的Vue.js使用了一个叫做watch的特性来监听数据的变化并做出相应的响应。随着Vue.js的版本更新，Vue.js 3.0（也叫Vue 3）推出了许多新的特性和变化，其中包括对watch的改进和增强。本文将详细介绍Vue 3中watch的用法，并对Vue 2和Vue 3中watch的区别进行对比。
**一、Vue 3中watch的用法**
Vue 3中watch的用法有一些变化和增强，具体如下：
1. **立即执行**
在Vue 2中，当我们设置一个watcher时，它是默认不会立即执行的。而在Vue 3中，watch选项中有一个新属性“immediate”，当这个属性被设置为true时，watch会立即执行一次。
例如：
const app = Vue.createApp({
data() {
return {
count: 0,
};
},
watch: {
count(newValue, oldValue) {
console.log('count的值发生了改变');
},
},
});
在这个例子中，当count的值发生变化时，Vue 2中的watch不会立即执行，而Vue 3中的watch会立即执行。
2. **使用回调函数**
在Vue 3中，我们可以通过传入回调函数的方式代替Vue 2中以字符串的方式使用watch。这样可以使得代码更加直观和易于理解。
例如：
const app = Vue.createApp({
data() {
return {
count: 0,
};
},
watch: {
count(newValue, oldValue) {
console.log('count的值发生了改变');
},
},
});
在这个例子中，当count的值发生变化时，Vue 2中的watch可以通过字符串传入回调函数，而Vue 3中使用函数定义。
3. **监听多个数据**
在Vue 3中，我们可以通过将watch设置为一个数组来同时监听多个数据的变化。这样可以简化代码，并且使得逻辑更加清晰。
例如：
const app = Vue.createApp({
data() {
return {
count1: 0,
count2: 0,
};
},
watch: {
[count1, count2](newValues, oldValues) {
console.log('count1或count2的值发生了改变');
},
},
});
在这个例子中，当count1或count2的值发生变化时，Vue 3中的watch会执行定义的回调函数。
**二、Vue 2和Vue 3中watch的区别**
1. **响应式实现方式的变化**
在Vue 2中，它使用了Object.defineProperty方法实现数据的响应式，通过对数据的get和set进行劫持，使得我们可以监听到数据变化的过程。而在Vue 3中，它使用了ES6中的Proxy代理实现数据的响应式，相较于Vue 2，Proxy具有更高的性能和更好的浏览器兼容性。
2. **语法的变化**
Vue 2中的watch可以使用字符串或函数作为第一个参数来监听数据变化，而Vue 3中的watch可以使用一个对象来监听多个数据的变化。Vue 3中watch的使用方法更加直观和易于理解，同时也支持多种用法。
3. **性能的改进**
由于使用了Proxy代理实现响应式，Vue 3的性能相较于Vue 2也有所提升。在Vue 3中，由于使用了Proxy的方式实现数据的监听，它能够精确地追踪到数据变化，而不需要遍历整个对象。这也使得Vue 3在处理大型数据时更加高效。
4. **新增的特性和功能**
Vue 3中watch的一些新增特性包括立即执行和提供回调函数，这些改进和增强使得开发者在使用watch时能够更加灵活和便捷。Vue 3还提供了其他一些特性，如监听props的变化、监听ref、监听computed等。
**总结**
通过本文的介绍，我们了解了Vue 3中watch的用法以及与Vue 2中watch的区别。Vue 3中的watch在语法的改进、性能的提升以及新增的特性和功能方面都带来了一些变化和优化。在实际开发中，根据项目的需求和具体情况选择合适的版本和特性使用是至关重要的。Vue 3的watch提供了更加灵活和便捷的用法，可以更好地满足开发者的需求。 
