【vue3练习 -07】vue3监听属性watch

使用：还是一样使用前先引入一下，watch依然还是个函数，接收三个参数

分别是：监视的对象，回调函数，属性配置对象

截止发文时，监听函数共有以下六种情况：

情况一：监视ref定义的数据

    // 接收三个参数，第一个监视的数据，第二个为一个回调函数，接收两个参数新值与旧值，第三个为对象配置深度与初始执行
    watch(name, (newValue, oldValue) => {
      console.log("name变化了", newValue, oldValue);
    });

 情况二：监视多个数据

 // 监听多个属性时第一个参数可以写成数组形式
    watch([name, age], (newValue, oldValue) => {
      console.log("name跟age变化了", newValue, oldValue);
    });

情况三：监听reactive定义的数据

    // 此处oldValue是失效的，oldValue的值跟newValue是一样的
    // 此处配置深度监视无效，默认开启深度监视，关闭不了
    watch(obj, (newValue, oldValue) => {
      //   console.log("obj", newValue, oldValue);
    }),
      { deep: false };

情况四：监听对象里的某个属性

  //   监听对象里面某个属性要写成回调函数的形式
    watch(
      () => obj.meili.name,
      (newValue, oldValue) => {
        console.log("obj.meili.name", newValue, oldValue);
      }
    );

情况五：监听对象里的某些属性

   //   监听对象里面某些属性要写成数组回调函数的形式
    watch([() => obj.name, () => obj.meili.name], (newValue, oldValue) => {
      console.log("obj.meili.name", newValue, oldValue);
    });

情况六：监听对象里的某个对象或某个属性

    //   监听对象里面某个属性时开启deep有效，如这个属性还是个对象就得开启deep才能监听到了
    watch(
      () => obj.meili.info,
      (newValue, oldValue) => {
        console.log("obj.meili.info", newValue, oldValue);
      },
      { deep: true }
    ); //此时需要开启深度监视

ref定义的数据情况：

 // 监听ref定义的对象时需要.value，除此之外还有一种方法就是不需要.value 而是开启深度监视
    watch(obj.value,(newValue, oldValue) => {
        console.log("obj.meili.info", newValue, oldValue);
      },{ deep: true })//此处如果开启了深度监视则不需要.value

全代码示例：

<template>
  <input type="text" v-model="person.firstName" />
  <input type="text" v-model="person.lastName" />
  <span>全名：{{ person.fullName }}</span>
  <input type="text" v-model="person.fullName" />
  <hr />
  <span>测试一下watch</span>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <button @click="name += '@'">修改name</button>
  <button @click="age++">修改age</button>
  <hr />
  <span>测试一下watch监听reactive</span>
  <div>{{ obj.meili.info.age }}</div>
  <button @click="obj.meili.info.age++">修改reactive</button>
  <div>{{ obj.meili.name }}</div>
  <button @click="obj.meili.name += '$'">监听对象里的某个属性</button>
</template>

<script>
import { reactive, ref, watch } from "vue";
export default {
  name: "",
  emits: ["changeValue"],
  setup() {
    let name = ref("路飞");
    let age = ref(17);
    let person = reactive({ firstName: "张", lastName: "三" });
    // 接收三个参数，第一个监视的数据，第二个为一个回调函数，接收两个参数新值与旧值，第三个为对象配置深度与初始执行
    watch(name, (newValue, oldValue) => {
      console.log("name变化了", newValue, oldValue);
    });
    // 监听多个属性时第一个参数可以写成数组形式
    watch([name, age], (newValue, oldValue) => {
      console.log("name跟age变化了", newValue, oldValue);
    });
    //第三个参数为对象配置一些属性，如immediate、deep
    watch(
      age,
      (newValue, oldValue) => {
        console.log("age", newValue, oldValue);
      },
      { immediate: true } //由于是ref定义的数据配置deep也没效
    );
    let obj = reactive({
      name: "桑尼",
      meili: {
        name: "梅丽",
        captain: "路飞",
        info: {
          age: 2,
        },
      },
    });
    // 此处oldValue是失效的，oldValue的值跟newValue是一样的
    // 此处配置深度监视无效，默认开启深度监视，关闭不了
    watch(obj, (newValue, oldValue) => {
      //   console.log("obj", newValue, oldValue);
    }),
      { deep: false };
    //   监听对象里面某个属性要写成回调函数的形式
    watch(
      () => obj.meili.name,
      (newValue, oldValue) => {
        console.log("obj.meili.name", newValue, oldValue);
      }
    );
    //   监听对象里面某些属性要写成数组回调函数的形式
    watch([() => obj.name, () => obj.meili.name], (newValue, oldValue) => {
      console.log("obj.meili.name", newValue, oldValue);
    });
    //   监听对象里面个属性时开启deep有效，如这个属性还是个对象就得开启deep才能监听到了
    watch(
      () => obj.meili.info,
      (newValue, oldValue) => {
        console.log("obj.meili.info", newValue, oldValue);
      },
      { deep: true }
    ); //此时需要开启深度监视

    return {
      person,
      name,
      age,
      obj,
    };
  },
};
</script>

<style lang="" scoped>
</style>