今天就跟大家聊聊有關(guān)使用vue如何監(jiān)聽數(shù)組變化，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司自成立以來，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開發(fā)管理經(jīng)驗(yàn)、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團(tuán)隊(duì)及專業(yè)的網(wǎng)站設(shè)計(jì)師團(tuán)隊(duì)。

我們知道通過Object.defineProperty()劫持?jǐn)?shù)組為其設(shè)置getter和setter后，調(diào)用的數(shù)組的push、splice、pop等方法改變數(shù)組元素時并不會觸發(fā)數(shù)組的setter，這就會造成使用上述方法改變數(shù)組后，頁面上并不能及時體現(xiàn)這些變化，也就是數(shù)組數(shù)據(jù)變化不是響應(yīng)式的（對上述不了解的可以參考這篇文章）。但實(shí)際用vue開發(fā)時，對于響應(yīng)式數(shù)組，使用push、splice、pop等方法改變數(shù)組時，頁面會及時體現(xiàn)這種變化，那么vue中是如何實(shí)現(xiàn)的呢？

通過vue源碼可以看出，vue重寫了數(shù)組的push、splice、pop等方法。

// src/core/observer/array.js

// 獲取數(shù)組的原型Array.prototype，上面有我們常用的數(shù)組方法
const arrayProto = Array.prototype
// 創(chuàng)建一個空對象arrayMethods，并將arrayMethods的原型指向Array.prototype
export const arrayMethods = Object.create(arrayProto)

// 列出需要重寫的數(shù)組方法名
const methodsToPatch = [
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]
// 遍歷上述數(shù)組方法名，依次將上述重寫后的數(shù)組方法添加到arrayMethods對象上
methodsToPatch.forEach(function (method) {
 // 保存一份當(dāng)前的方法名對應(yīng)的數(shù)組原始方法
 const original = arrayProto[method]
 // 將重寫后的方法定義到arrayMethods對象上，function mutator() {}就是重寫后的方法
 def(arrayMethods, method, function mutator (...args) {
  // 調(diào)用數(shù)組原始方法，并傳入?yún)?shù)args，并將執(zhí)行結(jié)果賦給result
  const result = original.apply(this, args)
  // 當(dāng)數(shù)組調(diào)用重寫后的方法時，this指向該數(shù)組，當(dāng)該數(shù)組為響應(yīng)式時，就可以獲取到其__ob__屬性
  const ob = this.__ob__
  let inserted
  switch (method) {
   case 'push':
   case 'unshift':
    inserted = args
    break
   case 'splice':
    inserted = args.slice(2)
    break
  }
  if (inserted) ob.observeArray(inserted)
  // 將當(dāng)前數(shù)組的變更通知給其訂閱者
  ob.dep.notify()
  // 最后返回執(zhí)行結(jié)果result
  return result
 })
})

網(wǎng)站題目：使用vue如何監(jiān)聽數(shù)組變化-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/iidpp.html