Vue3教程 - 8 watchEffect

watchEffect 和 watch 的功能很相似，都是用来监视数据的变化。

有什么区别呢？

watch 需要明确指出监视的数据，而 watchEffect 不用明确指出监视的数据。

举个栗子：

一辆小车，前面和后面分别安装了避障传感器，但前面的距离或后面的距离小于20cm，就停止。使用 watch ，需要监视前后的避障传感器的数据，然后进行判断。

可能编写的代码如下：

<template>
  <div>{{ frontDistance }} cm</div>
  <div>{{ backDistance }} cm</div>

  <button @click="changeFrontDistance">减少前面距离</button>
  <button @click="changeBackDistance">减少后面距离</button>
</template>

<!-- setup -->
<script lang="ts" setup>
import { ref, watch } from 'vue'  // 1.引入 watchEffect

let frontDistance = ref(100)
let backDistance = ref(100)

// 修改前面的距离
function changeFrontDistance() {
  frontDistance.value -= 10
}

// 修改后面的距离
function changeBackDistance() {
  backDistance.value -= 10
}

// 监视前后距离
watch([frontDistance, backDistance], (newValue)=> {
  // 从数组中获取到值
  let [frontValue, backValue] = newValue
  if (frontValue <= 20 || backValue <= 20) {
    console.log("停止")
  }
})
</script>

在上面的代码中，通过按钮减少前后的距离，用于测试。通过 watch 监视前后距离，距离小于等于20 ，则停止。

使用 watch ，需要使用哪些数据进行判断，就需要明确指出要监视的数据。

而使用 watchEffect，不用明确指出监视的数据，watchEffect 的参数是一个函数，函数中用到哪些数据就会监视哪些数据的变化。

所以使用 watchEffect 替换 watch 实现上面的功能，可以修改代码如下：

// 监视前后距离
watchEffect(()=> {
  console.log(frontDistance.value, backDistance.value)
  if (frontDistance.value <= 20 || backDistance.value <= 20) {
    console.log("停止")
  }
})

另外，watchEffect 在页面第一次加载的时候，就会执行一次。