1、概述
上节: 详解watch用法，watch功能是监视某些数据的变化，一旦发生变化，调用回调，传递新旧数值。watchEffect官方定义如下：
立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
简言之，watchEffect是一个函数，只需向 watchEffect 传递一个函数即可。在这个函数内部，你引用的任何响应式数据都会被自动监视其变化。
以下通过两个实例对比watch与watchEffect区别
2、watch事例
- 创建Fish组件，引入ref、watch
- 创建鱼类价格与重量
- 调用watch
- 当价格大于15且重量大于5，就能赚到钱了
<template>
<h2>鱼类：鲫鱼</h2>
<h2>鱼价格：{{ price }}元</h2>
<h2>鱼重量：{{ weight }}kg</h2>
<button @click="changePrice()">修改鱼类</button>
<button @click="changeFishWeight()">修改鱼的重量</button>
</template>
<script setup>
import { ref, watch} from 'vue'
let price = ref(13);
let weight = ref(3);
function changePrice() {
price.value += 1;
}
function changeFishWeight() {
weight.value += 1;
}
watch([price, weight], (newValue) => {
const [ price, weight ] = newValue;
console.log(price, weight);
if (price > 15 && weight > 5) {
console.log('赚到钱了')
}
})
</script>
运行效果如下图，watch通过数组的方式监视price与weight变化，由于我们不关注旧值的数据，参数只有newValue。当点击按钮超过对应值时，打印赚到钱了。
3、watchEffect事例
- 创建Fish组件，引入ref、watchEffect
- 创建鱼类价格与重量
- 调用watchEffect
- 当价格大于15且重量大于5，就能赚到钱了
<template>
<h2>鱼类：鲫鱼</h2>
<h2>鱼价格：{{ price }}元</h2>
<h2>鱼重量：{{ weight }}kg</h2>
<button @click="changePrice()">修改鱼类</button>
<button @click="changeFishWeight()">修改鱼的重量</button>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
let price = ref(13);
let weight = ref(3);
function changePrice() {
price.value += 1;
}
function changeFishWeight() {
weight.value += 1;
}
watchEffect(() => {
console.log('watchEffect被调用');
if (price.value > 15 && weight.value > 5) {
console.log('赚到钱了')
}
})
</script>
运行效果如下图，watchEffect会自动监视price与weight变化，并在页面加载成功时，就调用一次watchEffect。后边当点击修改价格、修改重量按钮时，watchEffect都会被调用。
4、对比watch与watchEffect区别
- 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
- watch：要明确指出监视的数据
- watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）
