vue 监听器（学习 完整语法）

需求

侦听一个对象/数组，且监听函数立即执行

效果

代码

<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