大家好，本篇文章我們繼續(xù)學習和 Vue 相關的內容，今天我們歸納總結下如何使用 watch 監(jiān)聽組件中的數(shù)據(jù)變化，以及 computed 和 watch 的區(qū)別。

目前成都創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網站建設、域名、虛擬空間、成都網站托管、企業(yè)網站設計、永昌網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

什么是 watch，以及如何使用？

watch 是 Vue.js 中用于監(jiān)聽數(shù)據(jù)變化的一種機制。它允許我們在數(shù)據(jù)發(fā)生變化時執(zhí)行特定的操作。

在 Vue 中使用 watch 的方法如下：

在 Vue 組件中，定義一個 watch 對象，其中包含要監(jiān)聽的數(shù)據(jù)屬性以及對應的回調函數(shù)。

watch: {
  dataName: function(newValue, oldValue) {
    // code
  }
}

其中，dataName 是要監(jiān)聽的數(shù)據(jù)名稱，newValue 是新的值，oldValue 是舊的值。

在 Vue 實例中，使用 $watch() 方法進行監(jiān)聽

vm.$watch('someData', function(newVal, oldVal) {
  // do something with newVal
});

注意：watch 回調函數(shù)會在偵聽的數(shù)據(jù)發(fā)生變化時立即執(zhí)行，而 computed 屬性只有在其依賴的數(shù)據(jù)發(fā)生變化時才會計算。

watch 通常用于監(jiān)聽一個數(shù)據(jù)的變化并執(zhí)行復雜的業(yè)務邏輯，例如在某個數(shù)據(jù)變化后需要進行 HTTP 請求或者調用其他函數(shù)。

下面是一個簡單的 watch 的例子:

在這個例子中，我們使用了 watch 來監(jiān)聽 message 的變化，并在數(shù)據(jù)變化時打印出更改前后的值。

當然，watch 還可以接收一個對象，其中可以定義多個監(jiān)聽器。這里有一個例子，它監(jiān)聽了多個數(shù)據(jù)：

watch: {
  firstName: function (newVal, oldVal) {
    console.log('firstName changed from ' + oldVal + ' to ' + newVal)
  },
  lastName: function (newVal, oldVal) {
    console.log('lastName changed from ' + oldVal + ' to ' + newVal)
  }
}

一些高級用法介紹

深度觀察 (deep: true)：如果你希望對對象內部屬性的變化進行監(jiān)聽，可以使用 deep: true 選項。

data() {
  user: {
    name: 'John',
    age: 25
  }
},
watch: {
  'user.name': function (val) {
    console.log('user name changed:', val)
  }
}

在這個例子中，我們監(jiān)聽了 user 對象中的 name 屬性，當該屬性變化時，會執(zhí)行回調函數(shù)。

設置初始值 (immediate: true)：如果你希望 watch 在組件創(chuàng)建時立即執(zhí)行一次，可以使用 immediate: true 選項。

data() {
    count: 0
},
watch: {
    count: {
        handler: function (val, oldVal) {
            console.log('count changed');
        },
        immediate: true
    }
}

異步處理 (handler)：watch 的回調函數(shù)是異步執(zhí)行的，這意味著如果有多個值在短時間內發(fā)生變化，回調函數(shù)只會在這些變化結束后執(zhí)行一次。

watch: {
  searchText: function (val) {
    this.searching = true
    setTimeout(() => {
      this.searchData(val)
      this.searching = false
    }, 500)
  }
}

在這個例子中，我們監(jiān)聽了 searchText 屬性，并在數(shù)據(jù)變化后延遲 500 毫秒執(zhí)行搜索操作。

使用 watch 觀察器實現(xiàn)自動保存。

data() {
  content: ''
},
watch: {
  content: function (val) {
    localStorage.setItem('content', val)
  }
}

在這個例子中，我們監(jiān)聽了 content 屬性，并在數(shù)據(jù)變化時自動保存到本地存儲中。

應用場景介紹

watch 監(jiān)聽器還有許多其他的應用場景，例如：

• 在表單輸入時進行驗證，并顯示錯誤消息。
• 在表格中進行排序和過濾。
• 在地圖上實時顯示用戶位置。
• 監(jiān)聽路由變化并執(zhí)行相應操作。
• 監(jiān)聽窗口大小變化并調整布局。
• 監(jiān)聽滾動事件并實現(xiàn)懶加載。
• ……

1、在表單輸入時進行驗證，并顯示錯誤消息

2、在地圖上實時顯示用戶位置

在這個示例中，我們使用了 watch 來監(jiān)聽 userLocation 的變化，在用戶位置發(fā)生變化時，使用 setCenter 方法將地圖中心設置為用戶當前位置，并使用 google maps API 在地圖上添加一個標記，顯示用戶當前位置。

注意：這個例子需要引入 google maps 的 js 文件。

3、監(jiān)聽路由變化并執(zhí)行相應操作

4、監(jiān)聽窗口大小變化并調整布局

5、監(jiān)聽滾動事件并實現(xiàn)懶加載

注意：需要注意的是，在這個案例中，因為images數(shù)組中的對象被改變了，所以需要設置deep: true來監(jiān)聽對象

總之，watch 是一個非常強大和靈活的功能，它可以在數(shù)據(jù)變化時執(zhí)行任何操作，并且可以與 computed 計算屬性配合使用，來實現(xiàn)更復雜的邏輯。

computed 和 watch 的區(qū)別

watch和computed都可以監(jiān)聽Vue實例中的數(shù)據(jù)變化，但是它們有著明顯的不同。

watch	computed
用于監(jiān)聽某個特定的數(shù)據(jù)變化。	用于計算屬性，可以計算出一個新的值。
每次數(shù)據(jù)變化都會觸發(fā)回調函數(shù)。	僅在相關依賴發(fā)生改變時才會觸發(fā)重新計算。
適用于異步操作或復雜邏輯。	適用于簡單計算。
不可以在HTML模板中使用	可以在HTML模板中使用
沒有返回值	有返回值/getter
可以修改data中的數(shù)據(jù)	也可以使用setters 修改 data 中的數(shù)據(jù)

總之，如果你需要在數(shù)據(jù)變化時執(zhí)行異步操作或復雜邏輯，使用watch是更好的選擇；如果你需要在數(shù)據(jù)變化時計算出一個新值，使用computed是更好的選擇。

關于watch的性能

watch的性能取決于你的代碼實現(xiàn)方式和監(jiān)聽的數(shù)據(jù)量。

• 監(jiān)聽的數(shù)據(jù)量：如果你監(jiān)聽了大量的數(shù)據(jù)，那么 watch 的性能可能會受到影響。
• 代碼實現(xiàn)：如果你在 watch 回調函數(shù)中執(zhí)行了復雜的邏輯或異步操作，那么 watch 的性能可能會受到影響。
• 如果你只是需要在數(shù)據(jù)變化時執(zhí)行一些簡單的操作，那么 watch 的性能應該是可以接受的。

所以,在使用watch時,應該注意監(jiān)聽的數(shù)據(jù)量,并且在watch回調函數(shù)中盡量少執(zhí)行復雜的邏輯.總之,watch監(jiān)聽數(shù)據(jù)更新并執(zhí)行回調函數(shù)，性能會受到監(jiān)聽數(shù)據(jù)量和回調函數(shù)實現(xiàn)方式的影響，如果有性能問題，應該優(yōu)化監(jiān)聽的數(shù)據(jù)量和回調函數(shù)的實現(xiàn)方式.

結束

今天的文章就介紹到這里，關于 watch 的用法你學會了，希望今天的文章能幫助到你，感謝你的閱讀。

本文標題：Vue3 學習筆記，如何使用 Watch 監(jiān)聽數(shù)據(jù)變化
文章分享：http://uogjgqi.cn/article/dhdiscj.html