Vue watch 监听器
Vue 大约 2622 字监听器
监听data
中属性的变化。
方法监听器
缺点
- 无法在初始化加载时自动触发。
- 监听的是对象,对象中的属性变化无法触发。
使用
watch
中增加与需要被监听的属性的名字相同的方法,第一个参数是变化后的值,第二个参数是变化前的值。
对于对象中的属性,可以通过"对象.属性"
的方法来监听(注意双引号)。
const vm = new Vue({
el: "#app",
data: {
username: "张三",
info: {
age: "18"
}
},
watch: {
// 方法格式监听器
// 监听的函数名就是需要监听的字段名(设置成相同名字)
username(newVal, oldVal) {
console.log(newVal, oldVal)
},
//
"info.age"(newVal, oldVal) {
console.log(newVal, oldVal)
}
}
});
属性监听器
优点
- 通过设置
immediate: true
,让监听器初始化加载时就触发。 - 通过设置
deep: true
,让监听器监听对象中每个属性的变化。
使用
属性监听器的固定写法是watch
中增加与被监听属性相同名字的属性,且在内部定义handler
方法(固定handler
名字)。
immediate
、deep
属性默认为false
。
const vm = new Vue({
el: "#app",
data: {
address: "地址",
info: {
gender: "男"
}
},
watch: {
// 对象格式监听器,可以设置一加载页面就触发一次(设置`immediate`为`true`)。
address: {
handler(newVal, oldVal) {
console.log("handler#",newVal, oldVal)
},
// 默认 false
immediate: true
},
info: {
handler(newVal, oldVal) {
console.log("handler2#",newVal, oldVal)
},
// 默认 false
deep: true
}
}
});
完整代码
<div id="app">
<input type="text" v-model="username">
<br>
<input type="text" v-model="address">
<br>
<input type="text" v-model="info.gender">
<br>
<input type="text" v-model="info.age">
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
username: "张三",
address: "地址",
info: {
gender: "男",
age: "18"
}
},
watch: {
// 方法格式监听器
// 监听的函数名就是需要监听的字段名(设置成相同名字)
username(newVal, oldVal) {
console.log(newVal, oldVal)
},
// 对象格式监听器,可以设置一加载页面就触发一次(设置`immediate`为`true`)。
address: {
handler(newVal, oldVal) {
console.log("handler#",newVal, oldVal)
},
// 默认 false
immediate: true
},
info: {
handler(newVal, oldVal) {
console.log("handler2#",newVal, oldVal)
},
// 默认 false
deep: true
},
"info.age"(newVal, oldVal) {
console.log(newVal, oldVal)
}
}
});
</script>
阅读 93 · 发布于 2023-01-05
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
MySQL 查询冗余索引阅读 2126
-
Docker commit 没有历史数据阅读 926
-
Java 并发编程之 ConcurrentHashMap 1.8 源码分析阅读 888
-
JavaScript 获取本地局域网 IP 地址阅读 5779
-
Spring Boot 不返回为 null 的 JSON 字段阅读 3976
-
Android ContentLoadingProgressBar 进度条控件阅读 7359
-
Spring Boot 获取所有 SpringMVC Controller 路径阅读 517
-
Arthas 使用 trace 查找耗时操作和调用链路阅读 6310
-
TypeScript 相关知识点阅读 149
-
Windows 子系统 WslRegisterDistribution failed with error: 0xc03a001a阅读 694