1、概述
上节: 详解watch用法，watch功能是监视某些数据的变化，一旦发生变化，调用回调，传递新旧数值。watchEffect官方定义如下：
立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
简言之，watchEffect是一个函数，只需向 watchEffect 传递一个函数即可。在这个函数内部，你引用的任何响应式数据都会被自动监视其变化。
以下通过两个实例对比watch与watchEffect区别
2、watch事例
-
创建Fish组件，引入ref、watch
-
创建鱼类价格与重量
-
调用watch
-
当价格大于15且重量大于5，就能赚到钱了
<template>鱼类：鲫鱼
鱼价格：{{ price }}元
鱼重量：{{ weight }}kg
<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>鱼类：鲫鱼
鱼价格：{{ price }}元
鱼重量：{{ weight }}kg
<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：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）