前言

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

使用 watch

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

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

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

使用 computed

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

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

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

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

解決方式

• 使用 this.$set() 方法：
  this.$set() 是 Vue 提供的一個(gè)方法，用于設(shè)置對(duì)象或者數(shù)組某個(gè)屬性的值。當(dāng)使用 this.$set() 方法設(shè)置對(duì)象或數(shù)組某個(gè)屬性的值時(shí)，Vue 會(huì)自動(dòng)將這個(gè)屬性變?yōu)轫憫?yīng)式的，從而能夠監(jiān)聽到這個(gè)屬性的變化。下面是一個(gè)示例代碼：

  this.$set(this.myArray, 0, 'new value'); // 設(shè)置數(shù)組某一項(xiàng)的值
  this.$set(this.myObject, 'prop', 'new value'); // 設(shè)置對(duì)象某個(gè)屬性的值
  

• 使用以下幾個(gè)數(shù)組的方法：
  Vue 源碼里緩存了數(shù)組的原型鏈，然后重寫了以下幾個(gè)方法，觸發(fā)這幾個(gè)方法的時(shí)候會(huì) observer 數(shù)據(jù)，意思是使用這些方法不用再進(jìn)行額外的操作，視圖自動(dòng)進(jìn)行更新。推薦使用 splice() 方法，因?yàn)?nbsp;splice() 可以在數(shù)組的任何位置進(jìn)行刪除/添加操作。

  this.myArray.splice(0, 1, 'new value'); // 使用 splice() 方法設(shè)置數(shù)組某一項(xiàng)的值
  

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

vm.$set() 方法

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

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

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

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

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

總結(jié) 

到此這篇關(guān)于前端vue如何監(jiān)聽對(duì)象或者數(shù)組某個(gè)屬性變化的文章就介紹到這了,更多相關(guān)vue監(jiān)聽對(duì)象或者數(shù)組屬性變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論