[JavaScript知识库]7.0 vue3 watchEffect函数

上一篇：

vue3 watch监听函数（reactive篇）https://blog.csdn.net/qq_42543244/article/details/122281029上篇记录了watch监听函数（reactive篇），今天来记录vue3 新增的一个函数?watchEffect，其作用也是用于监听但是于watch又稍显不同，下面请看代码举例

<template>
  <h2>姓名：{{ data.name }}</h2>
  <h2>年龄：{{ data.age }}</h2>
  <h2>爱好：{{ data.hobby }}</h2>
  <h2>工作薪酬：{{ data.job.j1.money }} K</h2>
  <button @click="data.name = '李四'">改变姓名</button>
  <button @click="data.age += 1">改变年龄</button>
  <button @click="data.job.j1.money += 1">改变薪酬</button>
</template>

<script>
import { computed, reactive, watch, watchEffect } from "vue";
export default {
  name: "Demo",
  setup() {
    let data = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          money: 10,
        },
      },
    });

    /* 
      watch:需要指明监视的属性，也需要指明监听得回调  可以访问侦听状态变化前后的值
      watchEffect:不需要去指明监视的属性值，在监视的回调值使用到那个属性，就去监视那个属性, 
                  自动收集数据源作为依赖， watchEffect监听回调中没有状态变化前后的值
      watchEffect 和 computed 有些类似：
           computed:更加注重计算出来的值（即回调函数的返回值），retun必写 ，必有返回值
           watchEffect:更加注重过程（回调函数的函数体），不用写返回值 
     */

    // 关于watchEffect使用的业务场景可见下方举例（仅仅示例，别那么死板）
    // 当 data.name === '李四' && data.age === 19 去执行一个方法,方法如下
    function changeState(str) {
      console.log(`使用方法：${str}，条件满足，我执行了！`);
    }

    // 1.使用watch方法 ，

    // ·首先考虑去监听单个属性是不可行的，并不是不能写，能写，但是有些许麻烦 如下：
    watch(
      () => data.name,
      (newVal) => {
        if (newVal === "李四" && data.age === 19) changeState("监听单个属性");
      }
    );
    watch(
      () => data.age,
      (newVal) => {
        if (newVal === 19 && data.name === "李四") changeState("监听单个属性");
      }
    );

    /*
    ·考虑如何同时区监听多个属性  此做法也不错，比监听单个属性可简写多行代码，
    业务逻辑也会更加清晰（确定时，当需要同时监听得属性过多的时候，写法会有点难受）
    */
    watch([() => data.name, () => data.age], (newVal) => {
      if (newVal[0] === "李四" && newVal[1] === 19)
        changeState("wacth同时监听属性");
    });

    // ·此外，我们还可以利用computed 来达到目的  此种方法也不错
    let state = computed(() => {
      if (data.name === "李四" && data.age === 19) return true;
      return false;
    });
    watch(state, (newVal) => {
      if (newVal) changeState("利用computed,达到同时监听得目的");
    });

    //2. 使用watchEffect方法  没错，你没看错 就是这么easy 一行代码0.0
    watchEffect(() => {
      if (data.name === "李四" && data.age === 19)
        changeState("使用watchEffect方法监听");

      //想要监听一个嵌套多层的属性，直接监听即可
      let money = data.job.j1.money;
      console.log(money);
    });

    return {
      data,
    };
  },
};
</script>

总结：

? ? ? watch:需要指明监视的属性，也需要指明监听得回调 ?可以访问侦听状态变化前后的值

? ? ? watchEffect:不需要去指明监视的属性值，在监视的回调值使用到那个属性，就去监视那个属性,?自动收集数据源作为依赖， watchEffect监听回调中没有状态变化前后的值

? ? ? watchEffect 和 computed 有些类似：

? ? ? ? ? ?computed:更加注重计算出来的值（即回调函数的返回值），retun必写 ，必有返回值

? ? ? ? ? ?watchEffect:更加注重过程（回调函数的函数体），不用写返回值