vue3.0中对watchEffect案例详解

首先看一张图

看一个案例

  <div>
    {{ name }}
    {{ age }}
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
  
  setup() {
    const name = ref("lsh");
    const age = ref(18);

    const changeName = () => (name.value = "kobe");
    const changeAge = () => (age.value += 1);
    };
    
    // 默认进页面就会执行一次,自动收集相应式的依赖
    watchEffect(() => {
      console.log("name", name.value);
      console.log("name", age.value);
    });

但是如果我们想停止监听呢？

   // 停止监听，但是页面的数字还是会发生变化
    const stop = watchEffect(() => {
      console.log("name", name.value);
      console.log("name", age.value);
    });
    const changeAge = () => {
      age.value += 1;
      if (age.value > 20) {
        stop();
      }
    };

还有清除副作用

如何实现呢？

const stop = watchEffect((onInvalidate /* 名字可以自定义，形参 */) => {
  // 模拟网络请求
  const timer = setTimeout(() => {
    console.log('网络请求成功');
  }, 500);

  onInvalidate(() => { // 这个函数会被优先调用,在这个函数中清除额外的副作用;
    clearTimeout(timer);
  });

  console.log("name", name.value);
  console.log("name", age.value);
});

再插一句，watchEffect还有一个回调，flush有3个值

watchEffect(() => {
  console.log(title.value);
}, {
  flush: "post"   // 如果需要用到dom里面什么东西的话，操作dom，默认是pre，会导致第一次取不到dom
});
return {
  title,
};