vue中的watch的用法

Vue.js 中的 watch 可用來監聽資料屬性的變更並執行操作。語法為：watch(expression, callback, options)。它支援使用字串或函數監聽資料屬性，並在變化時呼叫回調函數，並可透過 options 配置是否立即呼叫、是否深層監聽和是否同步更新。

Vue.js 中watch 的用法

##Vue.js 中的watch 是回應式API，可讓你監聽資料屬性的變化並根據這些變化執行操作。

語法

<code class="js">watch(expression, callback, options)</code>

參數

• #expression：要監聽的資料屬性。可以是字串（屬性名）或函數（傳回需要監聽的值）。
• callback：當資料屬性改變時呼叫的函數。它接收兩個參數：新值和舊值。
• options（可選）：用於設定 watch 的可選物件。

範例

<code class="js">// 使用字符串
watch('message', function (newValue, oldValue) {
  console.log(`Message changed from "${oldValue}" to "${newValue}".`);
});

// 使用函数
watch(function () {
  return this.count;
}, function (newValue, oldValue) {
  console.log(`Count incremented from ${oldValue} to ${newValue}.`);
});</code>

選項

• immediate：控制watch 是否在元件初始化時立即呼叫回調函數，預設值為false。
• deep：控制 watch 是否深層監聽物件和陣列的變化，預設值為 false。
• sync：控制 watch 是否在資料屬性變更後立即呼叫回呼函數，預設值為 false。

使用場景

使用watch 的常見場景包括：

在資料屬性變更時更新DOM
在資料屬性發生變化時觸發外部動作（例如，發出請求）
• 回應其他元件的事件

以上是vue中的watch的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！