简述Vue中watch用法详解 ?

八股文_Vue面试题 0 60

参考回答

在 Vue 中，watch 是一个用于监听数据变化的机制。当某个数据（例如 data 中的属性、计算属性等）发生变化时，watch 会触发相应的回调函数。这对于处理异步或复杂的逻辑非常有用。watch 允许我们在数据变化时执行特定的代码。

基本用法

监听单个数据属性：
最简单的 watch 用法是监听一个普通的 data 属性。当该属性的值发生变化时，会触发指定的回调函数。

例子：
```
new Vue({
 data() {
   return {
     message: 'Hello Vue!'
   };
 },
 watch: {
   message(newValue, oldValue) {
     console.log('message changed from', oldValue, 'to', newValue);
   }
 }
});
```
在这个例子中，watch 监听 message 属性的变化。每当 message 的值变化时，watch 中定义的回调函数就会被触发，打印出旧值和新值。
监听计算属性：
除了普通的 data 属性外，watch 还可以用来监听计算属性。当计算属性的值发生变化时，watch 也会被触发。

例子：
```
new Vue({
 data() {
   return {
     firstName: 'John',
     lastName: 'Doe'
   };
 },
 computed: {
   fullName() {
     return this.firstName + ' ' + this.lastName;
   }
 },
 watch: {
   fullName(newValue, oldValue) {
     console.log('fullName changed from', oldValue, 'to', newValue);
   }
 }
});
```
在这个例子中，fullName 是一个计算属性，watch 监听它的变化。当 firstName 或 lastName 改变时，fullName 计算属性会重新计算，并触发 watch 的回调。

详细讲解与拓展

深度监听（deep）：
有时候我们需要监听对象或数组的内部变化，默认情况下，watch 只会在对象或数组本身的引用变化时触发。如果要监听对象内部的属性变化或数组内容的变化，可以通过设置 deep: true 来开启深度监听。

例子：
```
new Vue({
 data() {
   return {
     user: { name: 'John', age: 30 }
   };
 },
 watch: {
   user: {
     handler(newValue, oldValue) {
       console.log('user object changed');
     },
     deep: true
   }
 }
});
```
在这个例子中，watch 会监听 user 对象的任何内部变化。即使 user.name 或 user.age 改变了，watch 也会被触发。
立即触发（immediate）：
默认情况下，watch 只会在监听的数据发生变化时触发回调。如果你想在 Vue 实例创建时立即执行一次回调函数，可以设置 immediate: true。

例子：
```
new Vue({
 data() {
   return {
     message: 'Hello Vue!'
   };
 },
 watch: {
   message: {
     handler(newValue, oldValue) {
       console.log('message changed');
     },
     immediate: true
   }
 }
});
```
在这个例子中，message 的初始值是 'Hello Vue!'，由于设置了 immediate: true，回调函数会在 Vue 实例创建时立即执行一次。
监听数组的变动：
对于数组类型的 watch，如果没有设置 deep: true，它只会响应数组本身的引用变化。要监听数组内部的变化，可以使用 deep: true，或者使用数组的方法（例如 push、pop、splice）触发更新。

例子：
```
new Vue({
 data() {
   return {
     items: [1, 2, 3]
   };
 },
 watch: {
   items: {
     handler(newValue, oldValue) {
       console.log('items array changed');
     },
     deep: true
   }
 }
});
```
通过 deep: true，可以确保监听到数组内部的元素变化。

取消监听：
如果你需要在某些条件下停止监听，可以在 watch 中使用 this.$watch 返回的取消函数。

例子：

new Vue({
 data() {
   return {
     message: 'Hello Vue!'
   };
 },
 mounted() {
   const unwatch = this.$watch('message', function (newValue, oldValue) {
     console.log('message changed');
   });

   // 假设在某些条件下，我们想停止监听
   this.message = 'New message!';
   unwatch();  // 取消监听
 }
});

在这个例子中，unwatch 是一个函数，通过调用它，我们可以停止对 message 的监听。

总结

watch 是 Vue 提供的一个非常强大的机制，可以用来监听 data 或计算属性的变化并执行相应的回调。
可以通过设置 deep 来深度监听对象或数组的内部变化，使用 immediate 来立即触发回调。
watch 适合处理复杂的异步操作或数据变化时需要执行的副作用逻辑。

参考回答

基本用法

详细讲解与拓展

总结

发表评论 取消回复

发表评论取消回复