往期内容
《Vue零基础入门教程》第九课：插值语法细节
《Vue零基础入门教程》第十课：属性绑定指令
《Vue零基础入门教程》第十一课：事件绑定指令
《Vue零基础入门教程》第十二课：双向绑定指令
《Vue零基础入门教程》第十三课：条件渲染
《Vue零基础入门教程》第十四课：列表渲染
《Vue零基础入门教程》第十五课：样式绑定
《Vue零基础入门教程》第十六课：计算属性
1) 什么是侦听器
可以通过watch配置项, 监听data中已经存在的属性的改变
2) 语法
watch: {// 监听data中的firstName属性firstName() {// 执行一系列的操作},
},示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app">姓: <input type="text" v-model="lastName" /> <br />名: <input type="text" v-model="firstName" /> <br />全名(侦听器实现): {{fullName}}</div><script>const { createApp } = Vueconst vm = createApp({data() {return {lastName: '',firstName: '',fullName: '',}},watch: {// 侦听lastName的变化, 当lastName变化时, 执行该函数lastName() {this.fullName = this.lastName + this.firstName},// 侦听firstName的变化, 当firstName变化时, 执行该函数firstName() {this.fullName = this.lastName + this.firstName},},}).mount('#app')</script></body>
</html>
3) 特点
在watch对应的回调函数中, 可以获取到新值和 旧值
示例
const vm = new Vue({el: '#app',data: {firstName: '',lastName: '',},// 使用watch这个配置项watch: {// 在watch对应的回调函数中, 可以得到新值和旧值// 对于简单数据类型, 可以获取新旧值// 对于引用数据类型, 不能获取旧值firstName(newValue, oldValue) {// 一对多: 监听某一个属性的改变, 做一系列的操作console.log('firstName改变了...')console.log('新的值:', newValue)console.log('旧的值:', oldValue)},},
})4) 深度监听
默认情况下watch配置项只会对data中第一层的数据进行侦听.
如果第一层的数据是引用类型(如, 数组, 对象). 需要开启深度监听
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app">姓: <input type="text" v-model="lastName" /> <br />名: <input type="text" v-model="firstName" /> <br /><!-- 侦听器: 一因多果(关注一个已经存在的属性的改变) --><!-- 1. 如果是基本类型数据, 可以获取到新旧值2. 默认是浅层次的侦听3. 如果是引用类型, 如果需要深层次数据的改变, 开启深度侦听-->全名(侦听器实现): {{fullName}}</div><script>const { createApp } = Vueconst vm = createApp({data() {return {lastName: '',firstName: '',fullName: '',obj: { name: 'xiaoming' },}},watch: {// 侦听lastName的变化, 当lastName变化时, 执行该函数lastName(newValue, oldValue) {console.log('新的值: ', newValue)console.log('旧的值: ', oldValue)this.fullName = this.lastName + this.firstName},// 侦听firstName的变化, 当firstName变化时, 执行该函数firstName() {this.fullName = this.lastName + this.firstName},// obj() {// console.log('obj被修改了')// },obj: {handler() {console.log('obj被修改了...')},deep: true,},},}).mount('#app')</script></body>
</html>
5) 回调执行的时机
默认情况下
watch在DOM更新之前调用. 得到的是 DOM更新之前的数据
可以通过flush: 'post'设置在DOM更新之后调用回调
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app">{{msg}}</div><script>const { createApp } = Vueconst vm = createApp({data() {return {msg: 'hello',}},watch: {// 默认情况下. watch在DOM更新之前调用. 得到的是 DOM更新之前的数据// msg() {// console.log(app.innerHTML)// },msg: {handler() {console.log('更新之后的DOM', app.innerHTML)},flush: 'post',},},}).mount('#app')</script></body>
</html>
