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

成都創新互聯公司自成立以來，一直致力于為企業提供從網站策劃、網站設計、成都網站設計、網站制作、電子商務、網站推廣、網站優化到為企業提供個性化軟件開發等基于互聯網的全面整合營銷服務。公司擁有豐富的網站建設和互聯網應用系統開發管理經驗、成熟的應用系統解決方案、優秀的網站開發工程師團隊及專業的網站設計師團隊。

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

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

// src/core/observer/array.js

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

// 列出需要重寫的數組方法名
const methodsToPatch = [
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]
// 遍歷上述數組方法名，依次將上述重寫后的數組方法添加到arrayMethods對象上
methodsToPatch.forEach(function (method) {
 // 保存一份當前的方法名對應的數組原始方法
 const original = arrayProto[method]
 // 將重寫后的方法定義到arrayMethods對象上，function mutator() {}就是重寫后的方法
 def(arrayMethods, method, function mutator (...args) {
  // 調用數組原始方法，并傳入參數args，并將執行結果賦給result
  const result = original.apply(this, args)
  // 當數組調用重寫后的方法時，this指向該數組，當該數組為響應式時，就可以獲取到其__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)
  // 將當前數組的變更通知給其訂閱者
  ob.dep.notify()
  // 最后返回執行結果result
  return result
 })
})

網站題目：使用vue如何監聽數組變化-創新互聯
瀏覽地址：http://vcdvsql.cn/article38/iidpp.html

成都網站建設公司_創新互聯，為您提供定制網站、網站設計、關鍵詞優化、微信小程序、外貿網站建設、商城網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯