29.watch 和 watchEffect 的区别？

watchEffect 立即运行一个函数，然后被动地追踪它的依赖，当这些依赖改变时重新执行该函数。
watch 侦测一个或多个响应式数据源并在数据源变化时调用一个回调函数。

effect 原理

html

<script type="module">
  import {
    ReactiveEffect,
    reactive,
  } from "./node_modules/vue/dist/vue.esm-browser.js";
  const state = reactive({ name: "jw" });
  const effect = new ReactiveEffect(
    // getter
    () => {
      return state.name;
    },
    // scheduler
    () => {
      console.log("数据变化");
    }
  );
  effect.run();
  state.name = "shui";
</script>

<script type="module">
  import {
    ReactiveEffect,
    reactive,
  } from "./node_modules/vue/dist/vue.esm-browser.js";
  const state = reactive({ name: "jw" });
  const effect = new ReactiveEffect(
    // getter
    () => {
      return state.name;
    },
    // scheduler
    () => {
      console.log("数据变化");
    }
  );
  effect.run();
  state.name = "shui";
</script>

基于 effect 进行包装

// getter函数
watchEffect(() => {
  app.innerHTML = state.name; // 数据变化后，会调用scheduler内部会再次触发effect.run()重新运行getter
});

// 1.getter 函数   2.cb函数
watch(
  () => state.name, // 数据变化后，会调用scheduler，内部会调用cb
  (newVal, oldVal) => {}
);

// getter函数
watchEffect(() => {
  app.innerHTML = state.name; // 数据变化后，会调用scheduler内部会再次触发effect.run()重新运行getter
});

// 1.getter 函数   2.cb函数
watch(
  () => state.name, // 数据变化后，会调用scheduler，内部会调用cb
  (newVal, oldVal) => {}
);

watch 实现原理

29.watch 和 watchEffect 的区别？ ​

29.watch 和 watchEffect 的区别？