vue3 新属性 watchEffect与effectScope

vue3 新增了很多比较好玩的属性，大家可以看一下

• watchEffect
  vue3中watchEffect属性，立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

<template>
  <el-select v-model="textData" class="m-2" placeholder="Select" size="large">
    <el-option
      v-for="item in list"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

setup() {
    const options = [
      {
        value: "Option1",
        label: "Option1",
      },
      {
        value: "Option2",
        label: "Option2",
      },
    ];
    const data = reactive({
      textData: "",
      list: [] as TimeProp[],
    });
    const refData = toRefs(data);
    watchEffect(() => {
      data.list = options;
      console.log("调用啦");
      console.log(data.textData, "textData");
    });
    return {
      ...refData,
    };
})

运行一下可以看出，textData变化就会输出值，从而了解到watchEffect 不需要指定监听的属性，他会自动的收集依赖， 只要我们回调中引用到了 响应式的属性，那么当这些属性变更的时候，这个回调都会执行。
这样在一定的业务上很大程度方便了开发者，但是有些业务上不免造成不必要的麻烦，这个时候就要停止他的依赖。
官网上推荐停止监听，使用的是如下代码。

 const stop = watchEffect(() => {
      data.list = options;
      console.log("调用啦");
      console.log(data.textData, "textData");
    });
 stop();

• effectScope
  但是我看到effectScope属性的时候，发现取消依赖也可以用这样的方法。
  创建一个 effect 作用域对象，以捕获在其内部创建的响应式 effect (例如计算属性或侦听器)，使得这些 effect 可以一起被处理。

const scope = effectScope();
    scope.run(() => {
      watchEffect(() => {
        data.list = options;
        console.log("调用啦");
        console.log(data.textData, "textData");
      });
    });
    scope.stop();

这样，在run中定义的计算属性或侦听器（computed，watch, watchEffect等 ），在调用了scope对象的stop()方法之后，所有的依赖都被停止，只在初始化的时候调用一次。