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