watch

# watch

需要明确指明监听哪个;

export default {
  name: "Watch",
  setup() {
    const numberRef = ref(100);
    const state = reactive({
      name: "sgy",
      age: 20,
    });

    watch(
      numberRef,
      (newNumber, oldNumber) => {
        console.log("ref watch", newNumber, oldNumber);
      },
      {
        // 初始化前就开始监听,可选
        // 会输出:ref watch 100 undefined
        immediate: true,
      }
    );

    watch(
      // 第一个参数,确定要监听哪个属性
      () => state.age,
      // 第二个参数,回调函数
      (newAge, oldAge) => {
        console.log("state watch", newAge, oldAge);
      },
      // 第三个参数,配置项
      {
        immediate: true,
        deep: true,
      }
    );

    return {
      numberRef,
      ...toRefs(state),
    };
  },
};

# watchEffect

  1. 在 watchEffect 内部,你写了哪了,就监听哪个;

  2. 初始化的时候一定执行一次(收集要监听的数据);

export default {
  name: "WatchEffect",
  setup() {
    const numberRef = ref(100);
    const state = reactive({
      name: "sgy",
      age: 20,
    });

    watchEffect(() => {
      // name变了就能监听到,age变了不行
      console.log("state.name", state.name);
    });
  },
};

# 区别

  1. 两者都可监听 data 属性变化;

  2. watch 需要明确监听哪个属性;

  3. watchEffect 会根据其中的属性,自动监听其变化;