vue 中 watcher 的作用是觀察數(shù)據(jù)變化并執(zhí)行相應(yīng)操作，具體場景包括：偵聽數(shù)據(jù)變化、觸發(fā) ui 更新、異步數(shù)據(jù)操作、實(shí)現(xiàn)自定義邏輯。
Vue 中 Watcher 的作用
在 Vue 中，Watcher 是一個(gè)用來觀察數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的對(duì)象。當(dāng)被觀察的數(shù)據(jù)發(fā)生變化時(shí)，Watcher 會(huì)觸發(fā)相應(yīng)的回調(diào)函數(shù)。
Watcher 的作用
Watcher 主要用于以下場景：
偵聽數(shù)據(jù)變化：當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Watcher 會(huì)自動(dòng)觸發(fā)，執(zhí)行回調(diào)函數(shù)中的操作。
觸發(fā) UI 更新：當(dāng)數(shù)據(jù)變化后需要更新 UI 時(shí)，可以通過 Watcher 來觸發(fā) Vue 的響應(yīng)式更新機(jī)制。
異步數(shù)據(jù)操作：當(dāng)需要對(duì)異步獲取的數(shù)據(jù)進(jìn)行操作時(shí)，可以使用 Watcher 來等待數(shù)據(jù)返回并觸發(fā)回調(diào)函數(shù)。
實(shí)現(xiàn)自定義邏輯：通過定義自定義 Watcher，可以實(shí)現(xiàn)更復(fù)雜的業(yè)務(wù)邏輯，例如條件判斷、數(shù)據(jù)驗(yàn)證等。
Watcher 的使用
在 Vue 中，可以使用 watch 選項(xiàng)來定義 Watcher，格式如下：
<code class="js">watch: {
// 被觀察的數(shù)據(jù)
propertyName: {
// 數(shù)據(jù)發(fā)生變化時(shí)觸發(fā)的回調(diào)函數(shù)
handler(newValue, oldValue) {
// 要執(zhí)行的操作
},
// 是否立即執(zhí)行回調(diào)函數(shù)（默認(rèn) false）
immediate: true,
},
}</code>
登錄后復(fù)制
示例
以下是一個(gè)簡單示例，演示如何使用 Watcher 來更新 UI：
<code class="js">const App = {
data() {
return {
count: 0,
};
},
watch: {
count(newValue, oldValue) {
console.log(`計(jì)數(shù)從 ${oldValue} 變?yōu)?${newValue}`);
},
},
template: `<p>計(jì)數(shù)：{{ count }}</p>`,
};</code>
登錄后復(fù)制
在這個(gè)示例中，當(dāng) count 數(shù)據(jù)發(fā)生變化時(shí)，Watcher 會(huì)觸發(fā)回調(diào)函數(shù)，并打印出數(shù)據(jù)變化的信息。
