0
点赞
收藏
分享

微信扫一扫

对vue监听器watch的理解

作用

当通过计算属性拿值时,走get;当想要给计算属性赋值, 需要使用set方法,走set

语法

data(){},
computed:{},
methods:{},
filters:{},
watch: {
"被监听的属性名" (newVal, oldVal){

}
}

小结

想要监听一个属性变化, 可使用监听属性watch

监听属性-深度监听和立即执行

目标

监听复杂类型, 或者立即执行监听函数

语法

watch: {
"要监听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度监听复杂类型内变化
handler (newVal, oldVal) {

}
}
}

demo

<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固定方法触发

举报

相关推荐

0 条评论