侦听器watch
1.作用
侦听data/计算属性中声明的变量的值的变化
2.语法
watch: {
被侦听的属性名(newVal, oldVal)){
newVal: 表示修改后的值
oldVal: 表示修改前的值
}
}
3.代码示例
<template>
<div>
// 注意: watch是和计算属性computed同级的
<input type="text" v-model="name" />
<input type="text" v-model="name" />
</div>
</template>
<script>
export default {
data() {
return {
name: "小明",
};
},
watch: {
// 只要被侦听的name属性的值发生改变, 函数就会立即触发
// 注意: 这里的变量名不需要加this, 因为vue源码中帮我们处理好了,
// 但是里函数里面还是需要this获取变量
name: function (newVal, oldVal) {
console.log(newVal, oldVal);
},
},
methods: {
},
filters: {
},
computed: {
},
};
</script>
<style scoped></style>
- 只要被侦听的name属性的值发生改变, 函数就会立即触发
4.深度侦听
-
作用: 侦听复杂数据类型的变量呢
-
语法:
要侦听的属性名: {
deep: true,// 表示深度侦听
handler(newVal,oldVal){
{
这个函数是固定写法, 用来接收对象修改前后的值
}}
}
- 代码示例
<template>
<div>
<input type="text" v-model="user.name" />
<input type="text" v-model="user.age" />
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: "小明",
age: 18,
},
};
},
watch: {
user: {
immediate: true, // 立即执行, 当这个属性的值为true的时候, 当执行的时候会触发侦听器
deep: true, // true, 启动深度侦听
handler(newVal, oldVal) {
console.log(newVal, oldVal);
//注意: 我们打印出来的newVal和oldVal值是一样的
// 为什么呢? 答: 因为user是一个对象, 所以我们只要修改属性的值, 那么对象中属性也就跟着改变了
},
},
},
};
</script>
<style></style>