Vue3的watchEffect的使用

Vue3的watchEffect的使用

Vue3的watchEffect的使用

• 它会监听所有的响应式数据，并且会立即执行，类似于Vue2中的watch的配置 immediate
• 它有两个API
• stop ：停止侦听
• onInvalidate ：清除副作用的函数
• flush（3个参数） : pre（默认） post（Dom挂载后执行） sync（不推荐使用 强制同步）

stop的使用 示例

<template>
  <div>
    {{ num }}
    {{ content }}
    <button @click="changeNum">点击</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  setup(props, { attrs, slots, emit }) {
    let num = ref("1");
    let content = ref(0);
    const changeNum = () => {
      content.value++;
      num.value = "2";
      if (content.value == 10) {
        stop();
      }
    };
    const stop = watchEffect(() => {
      console.log(content.value);
    });
    return {
      num,
      changeNum,
      content,
    };
  },
};
</script>

onInvalidate的使用 示例

<template>
  <div>
    {{ num }}
    {{ content }}
    <button @click="changeNum">点击</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  setup(props, { attrs, slots, emit }) {
    let num = ref("1");
    let content = ref(0);
    const changeNum = () => {
      content.value++;
      num.value = "2";
    };
    const stop = watchEffect((onInvalidate) => {
      console.log(content.value);
      let time = setTimeout(() => {
        console.log("发送请求成功~");
      }, 2000);
      onInvalidate(() => {
        clearTimeout(time);
      });
    });
    return {
      num,
      changeNum,
      content,
    };
  },
};
</script>

flush的使用

<template>
  <div>
    <div ref="Dom">我是Dom</div>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  setup(props, { attrs, slots, emit }) {
    const Dom = ref(null);
    const stop = watchEffect(
      () => {
        console.log(Dom.value);
      },
      {
        flush: "post",
      }
    );
    return {
      Dom,
    };
  },
};
</script>