vite+ts+vue3 知识点（watchEffect侦听器）

watchEffect清除副作用

import { watchEffect, ref } from "vue";

let person = ref({
  people: {
    name: {
      age: 20,
      sex: "男",
    },
  },
});

watchEffect((beforeFun) => {
  console.log(person.value.people.name.age);
  beforeFun(() => {
    console.log("清除");
  });
});

停止监听

import { watchEffect, ref } from "vue";

let person = ref({
  people: {
    name: {
      age: 20,
      sex: "男",
    },
  },
});

const stopWatch = watchEffect((beforeFun) => {
  console.log(person.value.people.name.age);
  beforeFun(() => {
    console.log("清除");
  });
});

const btn = () => {
  person.value.people.name.age = 10;
  person.value.people.name.sex = "女";
};

const stopBtn = () => {
  stopWatch();
};

注意：停止监听依旧会调用一次清除副作用的函数

配置选项

const stopWatch = watchEffect(
  (beforeFun) => {
    console.log(person.value.people.name.age);
    beforeFun(() => {
      console.log("清除");
    });
  },
  {
    // pre(组件更新之前调用) sync(同步执行) post(组件更新之后调用)
    flush: "pre",
  }
);