​

一：基本使用--直接代码（直观）

 watch: {
    name(nv, ov) {
      // nv:新值，ov:旧值
      console.log(nv, ov);
    },
  },

作用：用于侦听指定的属性值的变化，只要侦听的属性值发生了变化就会触发侦听器，进行相应事件处理

二：进阶：深度监听

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

<script>
export default {
  data() {
    return {
      username: "",
      str: "",
    };
  },
  // 深度监听
  watch: {
    obj: {
      // handler处理函数（名字固定）
      // 只要对象任意属性值发生变化就会自动触发这个函数进行处理
      handler(nv) {
        console.log(999);
      },
      // 添加深度监听：deep-开启
      deep: true,
      // immediate: true,说明它会默认开始就触发一次
      immediate: true,
    },
  },
};
</script>

<style>
</style>

deep:true -- 会对对象中所有属性进行监听，只要对象任意属性值发生变化就会自动触发这个函数进行处理。

immediate:true -- 默认开始会触发执行一次

三：深度监听-单个属性 -- 必须引号包起来

 watch: {
    // 深度监听-单个属性--必须用''号包起来
    "obj.price"() {
      console.log("HXY");
    },
  },

注意细节：侦听器的名称必须和你想侦听的属性名称完全一致

总结：大致就是这些其他的也不是很重要

​