Vue 3 -- Watch

Watch在使用上细节确实不少。(下面代码都运行测试通过)

1. 第一个参数：多种类型的入参，哪些情况必须写成getter呢?
2. 第二个参数：多个数据源的监听是容易被忘记的写法，
3. 第三个参数：

• immediate:明白后，可以对比watchEffect，进步可以了解内部实现中的lazy，同样lazy和computed实现更是强相关;
• flush:是重要的技术点，可以参照watchEffect，也就容易理解watchPostEffect/watchSyncEffect的语法糖api;
• onTrigger/onTrack:这两个选项和 @vue/reactivit包实现细节有很大关系，这里的代码写法比 vue2的实现优雅许多;
• 返回值watchStopHandler:是常被忽略清理的对象，对副作用域的处理可以参考 vueuse中的部分实现，学习优雅，

响应式追踪

const state = reactive({
    count: 0 });
watch(() => state.count, (newValue, oldValue) => {
   
  console.log(`${
     oldValue} -> ${
     newValue}`);
});

懒加载

const state = reactive({
    count: 0 });
watch(() => state.count, (newValue, oldValue) => {
   
  console.log(`${
     oldValue} -> ${
     newValue}`);
}, {
    immediate: true });

立即执行

const state