Chapter 07 watch侦听器

2024-08-30 22:20

文章标签 07 watch 侦听器 chapter

本文主要是介绍Chapter 07 watch侦听器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

欢迎大家订阅【Vue2+Vue3】入门到实践专栏，开启你的 Vue 学习之旅！

文章目录

前言
一、基本用法
二、深度侦听

前言

在 Vue 中，watch 侦听器是一个非常实用的工具，用于处理自定义数据的变化。本文详细讲解了 watch 侦听器的基本用法、深度侦听和常见应用场景。

一、基本用法

①定义
watch 侦听器用于观察 Vue 实例上的数据变更。当被观察的数据属性发生变化时，相应的回调函数会被触发，从而执行相应的业务逻辑。

②应用场景

异步请求：当数据变化时，可发起新的 API 请求。
表单处理：及时响应用户输入变化，进行表单验证或自动保存。
复杂数据结构处理：监控嵌套对象或数组的变化，执行相应的逻辑。

③基本语法
写法一：监测简单数据属性

watch:{数据属性名(newValue,oldValue){一些业务逻辑/异步操作}
}

【详解】

newValue：变化后的值。当被观察的 数据属性名 数据发生变化时，新的值会传递给这个 newValue 参数。
oldValue：变化前的值。当 数据属性名 的值改变时，可用这个参数来获取到变化之前的值。
回调函数体：在 {} 内部的内容是要执行的业务逻辑或异步操作。当 数据属性名 的值发生变化时，将会执行这个回调函数。

【示例】

watch:{count(newValue,oldValue){一些业务逻辑/异步操作}
}

写法二：监测对象属性

watch:{'对象.属性名'(newValue,oldValue){一些业务逻辑/异步操作}
}

【示例】

watch:{'user.name'(newValue,oldValue){一些业务逻辑/异步操作}
}

【示例】

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>watch侦听器</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  <div id="app">  <p>总数: {{ count }}</p>  <button @click="increment">加1</button>  </div>  <script>  new Vue({  el: '#app',  data() {  return {  count: 0 // 初始化 count  };  },  methods: {  increment() {  this.count += 1; // 增加 count 值  }  },  watch: {  count(newValue, oldValue) {  console.log(`Count changed from ${oldValue} to ${newValue}`);  }  }  });  </script>  
</body>  
</html>

运行结果：
在这里插入图片描述
点击“加1”按钮后，控制台输出“Count changed from 0 to 1”

二、深度侦听

如果需要监听一个对象或数组的内部变化，可以使用深度侦听。
基本语法：

watch:{数据属性名:{deep:true,   //深度监视（针对复杂类型）immediate:true,   //是否立刻执行一次handlerhandler(newValue){console.log(newValue)}}
}

deep：一个布尔值参数，如果设置为 true ，表示要对复杂类型（如对象或数组）进行深度监视，监视不仅限于对象或数组的引用变化，还监视其内部属性的变化。
immediate：一个布尔值参数，如果设置为 true，则在组件创建时立即执行一次回调函数（handler），可在数据初始化时就获取到当前的值，而不是等待数据改变时再执行。
handler(newValue)：监视器的回调函数，当被监视的变量发生变化时，执行此方法

【示例】

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>watch侦听器</title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  <div id="app">  <h2>User Information:</h2>  <p>姓名: {{ user.name }}</p>  <p>年龄: {{ user.age }}</p>  <button @click="updateUser">更新用户</button>    </div>  <script>  new Vue({  el: '#app',  data() {  return {  user: {  name: 'Alice',  age: 25  }  };  },  methods: {  updateUser() {  this.user.name = 'Bob'; // 更新用户名称  this.user.age += 1;     // 增加用户年龄  }  },  watch: {  user: {  deep: true, // 深度监视  handler(newValue) {  console.log('User data changed:', newValue);  }  }  }  });  </script>  
</body>  
</html>