vue之watchEffect

在Composition API中，我们可以使用watchEffect和watch来完成响应式数据的侦听。watchEffect用于自动收集响应式数据的依赖，需要手动指定侦听的数据源。

CamphorBloom

3359人浏览 · 2022-12-23 11:11:44

CamphorBloom · 2022-12-23 11:11:44 发布

在Options API中，我们可以通过watch选项来侦听data或者props的数据变化，当数据变化时执行某一些操作。在Composition API中，我们可以使用watchEffect和watch来完成响应式数据的侦听。 watchEffect用于自动收集响应式数据的依赖，需要手动指定侦听的数据源。

侦听数据的变化

案例：

watchEffect传入的函数会被立即执行一次，并且在执行的过程中会收集依赖；其次，只有收集的依赖发生变化时，watchEffect传入的函数才会再次执行；

<template>
  <div>
    <h2>{{name}}-{{age}}</h2>
    <button @click="changeName">修改name</button>
    <button @click="changeAge">修改age</button>
  </div>
</template>

<script>
  import { ref, watchEffect } from 'vue';

  export default {
    setup() {
      // watchEffect: 自动收集响应式的依赖
      const name = ref("why");
      const age = ref(18);

      const changeName = () => name.value = "kobe"
      const changeAge = () => age.value++

      watchEffect(() => {
        console.log("name:", name.value, "age:", age.value);
      });

      return {
        name,
        age,
        changeName,
        changeAge
      }
    }
  }
</script>

停止侦听

如果在某些情况下希望停止侦听，这个时候我们可以获取watchEffect的返回值函数，调用该函数即可。

 const stop = watchEffect(() => {
        console.log("name:", name.value, "age:", age.value);
      });

      const changeName = () => name.value = "kobe"
      const changeAge = () => {
        age.value++;
        if (age.value > 25) {
          stop();
        }
      }

比如在上面的案例中，当age达到25的时候就停止侦听。

清除副作用

在开发中我们需要在侦听函数中执行网络请求，但是在网络请求还没有达到的时候，停止了侦听器，或者侦听器/侦听函数被再次执行了。那么上一次的网络请求应该被取消掉，这个时候我们就可以清除上一次的副作用；

在给watchEffect传入的函数被回调时，其实可以获取到一个参数：onInvalidate

当 副作用即将重新执行 或者 侦听器被停止 时会执行该函数传入的回调函数，此时我们可以在传入的回调函数中，执行一些清除工作。

  const stop = watchEffect((onInvalidate) => {
        const timer = setTimeout(() => {
          console.log("网络请求成功~");
        }, 2000)

        // 根据name和age两个变量发送网络请求
        onInvalidate(() => {
          // 在这个函数中清除额外的副作用
          // request.cancel()
          clearTimeout(timer);
          console.log("onInvalidate");
        })
        console.log("name:", name.value, "age:", age.value);
      });

setup中使用ref

在setup中如何使用ref获取元素或组件？

其实非常简单，我们只需要定义一个ref对象，绑定到元素或者组件的ref属性上即可。

这里也可以用生命周期函数mounted来检测是否能正确获取到对应的dom元素。不过这里侦听函数会立即执行一次，所以先打印一个null值，后面等页面挂载完成了，搜集的依赖就再次被回调执行一次，打印真正的dom对象。

默认情况下，组件的更新会在副作用函数执行之前。

调整watchEffect执行时机

如果我们希望在第一次的时候就打印出来对应的元素呢？

这个时候就需要改变副作用函数的执行时机：默认值是pre，在元素挂载或者更新之前执行。

所以会先打印出来一个null，当依赖的title发生改变时，就会再次执行一次，打印出元素；

 watchEffect(() => {
        console.log(title.value);
      }, {
        flush: "post" //  获取组件更新完成之后的DOM
      })

flush 选项还接受sync，这将强制效果始终同步触发。然而这是低效的，应该很少需要。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^