Vue watch 监听器
Vue About 2,622 words监听器
监听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>
Views: 1,175 · Posted: 2023-01-05
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...