在 vue.js 中，watch 命令用于監聽數據變化并根據變化觸發特定處理函數，用于在數據改變時更新視圖或執行其他操作。具體機制包括：指定要監聽的數據，定義處理函數，執行操作。使用場景包括：動態更新視圖、響應用戶交互、監控狀態變化和跟蹤組件狀態改變。watch 也支持深度監聽嵌套數據。
Vue.js 中 watch 命令的作用
在 Vue.js 中，watch 命令用于監聽數據變化，并根據變化執行特定的處理函數。它的主要作用是，在數據發生特定改變時，觸發相應的函數以更新視圖或執行其他操作。
作用機制
指定要監聽的數據：使用 watch 命令時，需要指定要監聽的數據，可以是組件 data 中的數據，也可以是計算屬性。
定義處理函數：隨后定義一個處理函數，在監聽的數據發生變化時，該函數將會被觸發。
執行操作：在處理函數內，可以根據數據的變化執行相應的操作，例如更新視圖、執行異步請求或觸發其他事件。
使用場景
watch 命令通常用于以下場景：
當數據變化時動態更新視圖
響應表單輸入或其他用戶交互
監控狀態變化并觸發相應的操作
跟蹤組件狀態的改變，例如頁面滾動或鼠標位置
示例
以下示例展示了如何使用 watch 命令：
<code class="javascript">import Vue from "<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15721.html" target="_blank">vue</a>";
export default {
data() {
return {
count: 0,
};
},
watch: {
count: {
// 在 count 數據發生改變時觸發此函數
handler(newValue, oldValue) {
console.log(`count changed from ${oldValue} to ${newValue}`);
},
// 僅在 count 數據為偶數時觸發此函數
immediate: true,
},
},
};</code>
登錄后復制
深度監聽
Vue.js 允許使用嵌套對象或數組作為監聽數據。若要對嵌套數據進行深度監聽，可以使用 deep 選項：
<code class="javascript">watch: {
obj: {
handler() {
// obj 中的任何數據改變都會觸發此函數
},
deep: true,
},
};</code>
登錄后復制
