《Vue零基础入门教程》第十七课：侦听器
往期内容
《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 } = Vue
const 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 } = Vue
const 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 } = Vue
const 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>
