VUE3基础之watchEffect

前面讲到VUE3的监视器，是监视某个数据是否产生变化并对其进行的后续操作，而这里要讲到的是watchEffect，它不是监视某个数据，而是监视整个函数所用到的所有属性，只要其中一个改变，就会进行后续操作。

watchEffect

在官网上的解释是：立即执行一个函数，同时响应式地去追踪其依赖，并在依赖更改时重新执行该函数。

先做一个小的需求：当水温达到60℃或者水位达到80cm时发送请求。

<template>
  <div>需求:当水温达到60℃或者水位达到80cm时发送请求</div>
  <br />
  <div>当前水位：{{ height }}cm</div>
  <br />
  <div>当前水温度：{{ temp }}℃</div>
  <br />
  <button @click="changeHeight">水位＋10</button>
  <button @click="changeTemp">水温＋10</button>
</template>

<script setup lang="ts">
import { ref } from "vue";

let height = ref(10);
let temp = ref(10);

function changeHeight() {
  height.value += 10;
}
function changeTemp() {
  temp.value += 10;
}
</script>
<style scoped>

这是当前页面：

这个需求我们用watch也能够解决，只不过我们要去监视两个值：

watch([height, temp], (newValue) => {
  let [newHeight, newTemp] = newValue;
  if (newHeight === 80 || newTemp === 60) {
    console.log("发送请求");
  }
});

watch就好像有一种惰性，你必须得去指定清楚监视的数据，不然他就不管，而watchEffect就不用指定监视的数据，你直接用，他会自己判断需要监视的数据。

// 老规矩先引入
import { ref, watch, watchEffect } from "vue";

watchEffect(() => {
  console.log("触发");
});

watchEffect直接就传回调函数，而且你会发现他会直接开始执行，就像是watch加上了immediate属性，这就是个官网说的立即执行一个函数，这个函数就是watchEffect函数里传入的回调函数参数。

因为我们可以直接用不用指明监视的数据，它会自己分析要监视的数据，所以我们可以直接在里面进行判断，这就是官网上说的响应式地追踪其依赖。

watchEffect(() => {
  if (height.value === 80 || temp.value === 60) {
    console.log("发送请求");
  }
});

效果也是可以实现的：

和watch的区别

1. watch需要指明监视的数据，而watchEffect不用，它会自己去判断要监视的数据。
2. watchEffect会在一开始就立即执行，就像是watch加上了immediate属性。