前端vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化詳解

更新時間：2024年03月20日 15:07:24 作者：星辰迷上大海

這篇文章主要給大家介紹了關于前端vue如何監(jiān)聽對象或者數(shù)組某個屬性的變化的相關資料,在Vue中你可以使用watch或者computed來監(jiān)聽對象或數(shù)組某個屬性的變化,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在 Vue 中，你可以使用 watch 或者 computed 來監(jiān)聽對象或數(shù)組某個屬性的變化。但是，如果直接設置數(shù)組的某一項的值，或者直接設置對象的某個屬性值，這個時候，你會發(fā)現(xiàn)頁面并沒有更新。這是因為 Object.defineProperty() 限制，監(jiān)聽不到變化。

使用 watch

watch 是 Vue 提供的一個 API，用于監(jiān)聽對象或者數(shù)組某個屬性的變化。當被監(jiān)聽的屬性發(fā)生變化時，watch 中的處理函數(shù)會被調(diào)用。下面是一個示例代碼：

data() {
  return {
    myObject: {
      prop: 'initial value'
    }
  };
},
watch: {
  'myObject.prop': function(newVal, oldVal) {
    // 在這里處理屬性變化
  }
}

在上述示例中，當 myObject.prop 的值發(fā)生變化時，watch 中的處理函數(shù)會被調(diào)用。

使用 computed

computed 是 Vue 提供的一個計算屬性，用于監(jiān)聽對象或數(shù)組某個屬性的變化。當被監(jiān)聽的屬性發(fā)生變化時，computed 屬性會自動更新。下面是一個示例代碼：

data() {
  return {
    myArray: [1, 2, 3]
  };
},
computed: {
  arraySum() {
    return this.myArray.reduce((acc, cur) => acc + cur, 0);
  }
}

在上述示例中，arraySum 是一個計算屬性，它監(jiān)聽 myArray 數(shù)組的變化，并計算數(shù)組的和。當 myArray 數(shù)組發(fā)生變化時，arraySum 屬性會自動更新。

需要注意的是，對于數(shù)組的變化，Vue 還提供了一些特殊的方法，比如 Vue.set 或者使用擴展運算符 ... 來觸發(fā)響應式更新。在項目中，如果需要監(jiān)聽對象或數(shù)組某個屬性的變化，可以選擇使用 watch 或者 computed，根據(jù)具體需求選擇合適的方式。需要注意的是，當監(jiān)聽對象或數(shù)組某個屬性的變化時，要確保這個屬性是響應式的，否則監(jiān)聽不到變化。

解決方式

使用 this.$set() 方法：
this.$set() 是 Vue 提供的一個方法，用于設置對象或者數(shù)組某個屬性的值。當使用 this.$set() 方法設置對象或數(shù)組某個屬性的值時，Vue 會自動將這個屬性變?yōu)轫憫降?，從而能夠監(jiān)聽到這個屬性的變化。下面是一個示例代碼：
```
this.$set(this.myArray, 0, 'new value'); // 設置數(shù)組某一項的值
this.$set(this.myObject, 'prop', 'new value'); // 設置對象某個屬性的值
```
使用以下幾個數(shù)組的方法：
Vue 源碼里緩存了數(shù)組的原型鏈，然后重寫了以下幾個方法，觸發(fā)這幾個方法的時候會 observer 數(shù)據(jù)，意思是使用這些方法不用再進行額外的操作，視圖自動進行更新。推薦使用 splice() 方法，因為 splice() 可以在數(shù)組的任何位置進行刪除/添加操作。
```
this.myArray.splice(0, 1, 'new value'); // 使用 splice() 方法設置數(shù)組某一項的值
```

需要注意的是，在監(jiān)聽對象或數(shù)組某個屬性的變化時，要確保這個屬性是響應式的，否則監(jiān)聽不到變化。如果需要監(jiān)聽對象或數(shù)組某個屬性的變化，可以選擇使用 watch 或者 computed，根據(jù)具體需求選擇合適的方式。

vm.$set() 方法

vm.$set() 是 Vue 提供的一個方法，用于設置對象或數(shù)組某個屬性的值。當使用 vm.$set() 方法設置對象或數(shù)組某個屬性的值時，Vue 會自動將這個屬性變?yōu)轫憫降?，從而能夠監(jiān)聽到這個屬性的變化。

vm.$set() 的實現(xiàn)原理是：

如果目標是數(shù)組，直接使用數(shù)組的 splice() 方法觸發(fā)響應式；
如果目標是對象，會先判斷屬性是否存在、對象是否是響應式，最終如果要對屬性進行響應式處理，則是通過調(diào)用 defineReactive 方法進行響應式處理。defineReactive 方法就是 Vue 在初始化對象時，給對象屬性采用 Object.defineProperty 動態(tài)添加 getter 和 setter 的功能所調(diào)用的方法。

總之，vm.$set() 方法的實現(xiàn)原理是通過修改對象或數(shù)組的屬性值，從而觸發(fā) Vue 的響應式機制，使得 Vue 能夠監(jiān)聽到屬性的變化，并及時更新視圖。需要注意的是，在使用 vm.$set() 方法時，要確保對象或數(shù)組是響應式的，否則無法觸發(fā)響應式機制。

持續(xù)學習總結記錄中，回顧一下上面的內(nèi)容：
在 Vue 中，你可以使用 watch 或 computed 來監(jiān)聽對象或數(shù)組某個屬性的變化。如果直接設置數(shù)組的某一項的值或者對象的某個屬性值，頁面不會更新。解決方式有兩個：使用 this.$set() 方法或者使用以下幾個數(shù)組的方法：splice()、push()、pop()、shift()、unshift()、sort()、reverse()。需要注意的是，要確保對象或數(shù)組是響應式的，否則無法觸發(fā)響應式機制。