vue3 watch、watchEffect

1. ref（基本类型）

const count = ref(0);
const str = ref('abc');

// 1. 普通写法
// watch可以省略 .value
watch(count, (val, old) => console.log({ val, old }));

// 2. 函数写法
watch(
  () => count.value,
  (val, old) => console.log({ val, old }),
);

2. ref(响应式数据)

const refState = ref({
  count: 0,
  str: 'abc',
});
// 1. 普通写法，无效
// => refState.value 有效
watch(refState, (val, old) => console.log({ val, old }));
// 2. 函数写法
watch(
  () => refState.value.count,
  (val, old) => console.log({ val, old }),
);

3. reactive响应式数据

const state = reactive({
  count: 0,
  str: 'abc',
  a: {
    b: {
        c: 'a-b-c',
      },
    },
});
// 2. 函数写法
// 结果：指定属性变化才会触发
watch(
  () => state.value.a.b.c, // 只监听指定的 属性
  (val, old) => console.log({ val, old }),
);