需求
侦听一个对象/数组,且监听函数立即执行
效果
代码
<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: 0
}
}
},
// 目标: 侦听对象
watch: {
user: {
handler (newVal, oldVal) {
// user里的对象
console.log(newVal, oldVal)
},
deep: true,
immediate: true
}
}
}
</script>
语法
// 语法
watch: {
变量名: {
handler(newVal, oldVal){
},
deep: true, // 深度侦听(对象里面层的值改变)
immediate: true // 立即侦听(网页打开handler执行一次)
}
}
面试问点
- 如何侦听一个对象/数组呢?
- 把侦听器写成对象形式,给handler方法和deep:true
- 侦听器函数马上执行?
- immediate: true