watchEffect 函數(shù)：自動收集依賴源，不用指定監(jiān)聽哪個數(shù)據(jù)，在監(jiān)聽的回調(diào)中用到哪個數(shù)據(jù)，就監(jiān)聽哪個數(shù)據(jù)。

而 watch 函數(shù)：既要指定監(jiān)聽的數(shù)據(jù)，也要指定監(jiān)聽的回調(diào)。

watchEffect 函數(shù)：類似于 computed 計(jì)算屬性，但是 watchEffect 注重的是過程（回調(diào)函數(shù)的函數(shù)體），所以不用寫返回值。

而 computed 函數(shù)：更注重計(jì)算出來的值（回調(diào)函數(shù)的返回值），所以必須要寫返回值。

watchEffect 函數(shù)的使用：

<template><h2>計(jì)數(shù)：{{ sum }}</h2><button @click="sum++">點(diǎn)我加1</button><hr /><h2>姓名：{{ info.name }}</h2><h2>薪資：{{ info.job.money }}</h2><button @click="info.name += '風(fēng)'">修改姓名</button><button @click="info.job.money++">增加薪資</button><hr /><h2>年齡：{{ info.age }}</h2><button @click="info.age++">修改年齡</button>
</template><script>
// 引入 watchEffect 偵聽屬性
import { watchEffect, ref, reactive } from 'vue'
export default {name: "Home",setup() {// 創(chuàng)建 ref 數(shù)據(jù)let sum = ref(0);// 創(chuàng)建 reactive 數(shù)據(jù)let info = reactive({name: "張三",job: {money: 20},age: 18});// 監(jiān)聽所用數(shù)據(jù)的變化watchEffect(() => {const x1 = sum.value; // 使用 ref 數(shù)據(jù)const x2 = info.name; // 使用 reactive 數(shù)據(jù)const x3 = info.job.money; // 使用深層數(shù)據(jù)console.log('watchEffect函數(shù)用到的數(shù)據(jù)變了');console.log(x1, x2, x3);})// 返回?cái)?shù)據(jù)return { sum, info }}
}
</script>

注：watchEffect 函數(shù)不需要指定監(jiān)聽哪個數(shù)據(jù)，只要在 watchEffect 函數(shù)中用到的數(shù)據(jù)發(fā)生了變化，watchEffect 函數(shù)就會執(zhí)行。

原創(chuàng)作者：吳小糖

創(chuàng)建時間：2023.10.31