vue侦听器-深度侦听和立即执行

目标: 侦听复杂类型, 或者立即执行侦听函数

• 语法:

  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 侦听器结构 - 侦听 data 或 computed 值得变化
watch:{
    // name(newval,oldval){
    //     console.log(newval,oldval);
    // }
    user:{
        immediate:true,   //立即执行
        // 深度监听对象
        deep:true,
        // 复杂写法原本的函数写到handler  结构中
        handler(newval){
            console.log(newval);
        }
    }
}
}
</script>

<style>

</style>

总结: immediate立即侦听, deep深度侦听, handler固定方法触发