语法

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

完整示例:

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  watch: {
    name(newVal, oldVal){ // 当msg变量的值改变触发此函数
      console.log(newVal, oldVal);
    }
  }
}
</script>

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

语法

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