vue监听器-基本使用
作用
侦听器/监听器
可以监听数据（data/computed等）的值的改变。 数据的值有类型：基本数据类型，引用数据类型
语法
data(){},
computed:{},
methods:{},
filters:{},
watch: {
"被监听的属性名" (newVal, oldVal){
}
}
小结
想要监听一个属性变化, 可使用监听属性watch
监听属性-深度监听和立即执行
目标
监听复杂类型, 或者立即执行监听函数
语法
watch: {
"要监听的属性名": {
immediate: true, // 立即执行
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: { // 具体属性名(被监听)
handler(newVal, oldVal){ // 固定触发此函数
console.log(newVal);
},
immediate: true, // 马上监听触发
deep: true // 深度监听(监听name和age值的改变)
}
}
}
</script>
小结
immediate立即监听, deep深度监听, handler固定方法触发
