Object.defineProperty也能監聽數組變化？

来源:https://www.cnblogs.com/k21vin/archive/2022/07/10/16463241.html
-Advertisement-
Play Games

本文簡介 點贊 + 關註 + 收藏 = 學會了 首先，解答一下標題：Object.defineProperty 不能監聽原生數組的變化。如需監聽數組，要將數組轉成對象。 在 Vue2 時是使用了 Object.defineProperty 監聽數據變化，但我查了下 文檔，發現 Object.defi ...


本文簡介

點贊 + 關註 + 收藏 = 學會了


首先，解答一下標題：Object.defineProperty 不能監聽原生數組的變化。如需監聽數組，要將數組轉成對象。


在 Vue2 時是使用了 Object.defineProperty 監聽數據變化，但我查了下 文檔，發現 Object.defineProperty 是用來監聽對象指定屬性的變化。沒有看到可以監聽個數組變化的。

但 Vue2 有的確能監聽到數組某些方法改變了數組的值。本文的目標就是解開這個結。



基礎用法

Object.defineProperty() 文檔

關於 Object.defineProperty() 的用法，可以看官方文檔。

基礎部分本文只做簡單的講解。


語法

Object.defineProperty(obj, prop, descriptor)

參數

  • obj 要定義屬性的對象。
  • prop 要定義或修改的屬性的名稱或 Symbol 。
  • descriptor 要定義或修改的屬性描述符。
const data = {}
let name = '雷猴'

Object.defineProperty(data, 'name', {
  get() {
    console.log('get')
    return name
  },
  set(newVal) {
    console.log('set')
    name = newVal
  }
})

console.log(data.name)
data.name = '鯊魚辣椒'

console.log(data.name)
console.log(name)

上面的代碼會輸出

get
雷猴
set
鯊魚辣椒
鯊魚辣椒

上面的意思是，如果你需要訪問 data.name ，那就返回 name 的值。

如果你想設置 data.name ，那就會將你傳進來的值放到變數 name 里。

此時再訪問 data.name 或者 name ，都會返回新賦予的值。


還有另一個基礎用法：“凍結”指定屬性

const data = {}

Object.defineProperty(data, 'name', {
  value: '雷猴',
  writable: false
})

data.name = '鯊魚辣椒'
delete data.name
console.log(data.name)

這個例子，把 data.name 凍結住了，不管你要修改還是要刪除都不生效了，一旦訪問 data.name 都一律返回 雷猴 。

以上就是 Object.defineProperty 的基礎用法。



深度監聽

上面的例子是監聽基礎的對象。但如果對象里還包含對象，這種情況就可以使用遞歸的方式。

遞歸需要創建一個方法，然後判斷是否需要重覆調用自身。

// 觸發更新視圖
function updateView() {
  console.log('視圖更新')
}

// 重新定義屬性，監聽起來（核心）
function defineReactive(target, key, value) {

  // 深度監聽
  observer(value)

  // 核心 API
  Object.defineProperty(target, key, {
    get() {
      return value
    },
    set(newValue) {
      if (newValue != value) {
        // 深度監聽
        observer(newValue)

        // 設置新值
        // 註意，value 一直在閉包中，此處設置完之後，再 get 時也是會獲取最新的值
        value = newValue

        // 觸發視圖更新
        updateView()
      }
    }
  })
}

// 深度監聽
function observer(target) {
  if (typeof target !== 'object' || target === null) {
    // 不是對象或數組
    return target
  }

  // 重新定義各個屬性（for in 也可以遍曆數組）
  for (let key in target) {
    defineReactive(target, key, target[key])
  }
}

// 準備數據
const data = {
  name: '雷猴'
}

// 開始監聽
observer(data)

// 測試1
data.name = {
  lastName: '鯊魚辣椒'
}

// 測試2
data.name.lastName = '蟑螂惡霸'

上面這個例子會輸出2次“視圖更新”。


我創建了一個 updateView 方法，該方法模擬更新 DOM （類似 Vue的操作），但我這裡簡化成只是輸出 “視圖更新” 。因為這不是本文的重點。


測試1 會觸發一次 “視圖更新” ；測試2 也會觸發一次。

因為在 Object.defineProperty 的 set 裡面我有調用了一次 observer(newValue) ， observer 會判斷傳入的值是不是對象，如果是對象就再次調用 defineReactive 方法。

這樣可以模擬一個遞歸的狀態。


以上就是 深度監聽 的原理，其實就是遞歸。

但遞歸有個不好的地方，就是如果對象層次很深，需要計算的量就很大，因為需要一次計算到底。



監聽數組

數組沒有 key ，只有 下標。所以如果需要監聽數組的內容變化，就需要將數組轉換成對象，並且還要模擬數組的方法。

大概的思路和編碼流程順序如下：

  1. 判斷要監聽的數據是否為數組
  2. 是數組的情況，就將數組模擬成一個對象
  3. 將數組的方法名綁定到新創建的對象中
  4. 將對應數組原型的方法賦給自定義方法

代碼如下所示

// 觸發更新視圖
function updateView() {
  console.log('視圖更新')
}

// 重新定義數組原型
const oldArrayProperty = Array.prototype
// 創建新對象，原形指向 oldArrayProperty，再擴展新的方法不會影響原型
const arrProto = Object.create(oldArrayProperty);

['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
  arrProto[methodName] = function() {
    updateView() // 觸發視圖更新
    oldArrayProperty[methodName].call(this, ...arguments)
  }
})

// 重新定義屬性，監聽起來（核心）
function defineReactive(target, key, value) {

// 深度監聽
observer(value)

  // 核心 API
  Object.defineProperty(target, key, {
    get() {
      return value
    },
    set(newValue) {
      if (newValue != value) {
        // 深度監聽
        observer(newValue)

        // 設置新值
        // 註意，value 一直在閉包中，此處設置完之後，再 get 時也是會獲取最新的值
        value = newValue

        // 觸發視圖更新
        updateView()
      }
    }
  })
}

// 監聽對象屬性（入口）
function observer(target) {
  if (typeof target !== 'object' || target === null) {
    // 不是對象或數組
    return target
  }

  // 數組的情況
  if (Array.isArray(target)) {
    target.__proto__ = arrProto
  }

  // 重新定義各個屬性（for in 也可以遍曆數組）
  for (let key in target) {
    defineReactive(target, key, target[key])
  }
}

// 準備數據
const data = {
  nums: [10, 20, 30]
}

// 監聽數據
observer(data)

data.nums.push(4) // 監聽數組

上面的代碼之所以沒有直接修改數組的方法，如

 Array.prototype.push = function() {
   updateView()
   ...
 }

因為這樣會污染原生 Array 的原型方法，這樣做會得不償失。


以上就是使用 Object.defineProperty 的方法。

如需監聽更多方法，可以在數組 ['push', 'pop', 'shift', 'unshift', 'splice'] 中添加。



綜合代碼

// 深度監聽
function updateView() {
  console.log('視圖更新')
}

// 重新定義數組原型
const oldArrayProperty = Array.prototype
// 創建新對象，原形指向 oldArrayProperty，再擴展新的方法不會影響原型
const arrProto = Object.create(oldArrayProperty);
// arrProto.push = function () {}
// arrProto.pop = function() {}
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
  arrProto[methodName] = function() {
    updateView() // 觸發視圖更新
    oldArrayProperty[methodName].call(this, ...arguments)
  }
})

// 重新定義屬性，監聽起來（核心）
function defineReactive(target, key, value) {

  // 深度監聽
  observer(value)

  // 核心 API
  // Object.defineProperty 不具備監聽數組的能力
  Object.defineProperty(target, key, {
    get() {
      return value
    },
    set(newValue) {
      if (newValue != value) {
        // 深度監聽
        observer(newValue)

        // 設置新值
        // 註意，value 一直在閉包中，此處設置完之後，再 get 時也是會獲取最新的值
        value = newValue

        // 觸發視圖更新
        updateView()
      }
    }
  })
}

// 監聽對象屬性（入口）
function observer(target) {
  if (typeof target !== 'object' || target === null) {
    // 不是對象或數組
    return target
  }

  if (Array.isArray(target)) {
    target.__proto__ = arrProto
  }

  // 重新定義各個屬性（for in 也可以遍曆數組）
  for (let key in target) {
    defineReactive(target, key, target[key])
  }
}


總結

上面的代碼主要是模擬 Vue 2 監聽數據變化，雖然好用，但也有缺點。

缺點

  1. 深度監聽，需要遞歸到底，一次計算量大
  2. 無法監聽新增屬性/刪除屬性（所以需要使用 Vue.set 和 Vue.delete）
  3. 無法原生監聽數組，需要特殊處理

所以在 Vue 3 中，把 Object.defineProperty 改成 Proxy 。

但 Proxy 的缺點也很明顯，就是相容性問題。所以需要根據你的項目來選擇用 Vue 2 還是 Vue 3 。



推薦閱讀


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux Shell腳本
    基礎概念： - 機器語言：二進位的0和1的序列，稱為機器指令 - 彙編語言：用一些符號來代替機器語言 - 電腦：只能運行二進位指令 - 機器代碼文件：由0和1組成的二進位文件 - 編譯：將編寫好的程式文件通過一個工具（編譯器）變成機器代碼文件，然後在變成可執行文件。 #編譯的特點：效率高 - 解釋 ...
  • STC8H開發(十三): I2C驅動DS3231高精度實時時鐘晶元
    DS3231是高精度I2C實時時鐘晶元, I2C匯流排地址為固定的 0xD0, 內置溫度補償晶體振蕩源(TCXO), 降低溫度變化造成的晶體頻率漂移, 在[-40°C, 85°C]範圍內誤差 ±0.432s/Day, 秒、分、時、星期、日期、月、年, 閏年補償, 計數年份區間為[1990, 2190]... ...
  • 作業二、安裝CentOS7.9
    一、安裝環境 1、VMware Workstation 16 Pro 2、CentOS7.9 二、部署系統 步驟1、進入VMware，點擊創建新的虛擬機 步驟2、進入新建虛擬機嚮導，選擇典型(推薦) 步驟3、進入安裝來源，選擇稍後安裝操作系統 步驟4、進入客戶機操作系統選項，選擇Linux,版本Ce ...
  • 解決vmware上Ubuntu共用文件夾（2022年7月）
    解決vmware上ubuntu無法共用文件夾問題（ubuntu22.04） 第一步：設置共用文件夾 第二步：安裝open-vm-tools 1 sudo apt install open-vm-tools* 第三步：掛載文件夾 先查看設置的文件夾有沒有起效 1 vmware-hgfsclient 如 ...
  • Witch for Mac(mac優秀的視窗切換神器)
    Witch for Mac是mac上的一款優秀的視窗切換神器可讓您使用鍵盤快捷鍵執行Windows管理任務。通過應用程式的“首選項”視窗，您可以快速更改面板的外觀，預設顏色方案，項目的大小和字體等。使用Command + Tab鍵盤快捷鍵在應用程式之間快速切換非常有效。 詳情：Witch for M ...
  • S32K148-CAN收發
    最近在搞一個轉換板開發，大概意思把CAN信號轉換成SPI信號，方案有兩種：1）通過硬體電路直接把信號的bit位一位一位移給兩個集成晶元；2）通過MCU接收CAN信號，再把信號變數轉換成SPI信號發送給其他集成晶元，從而主MCU通過轉換板與其他晶元進行信息交互。目前我們採用的第二種方案，第二種方案實施 ...
  • Enfocus PitStop Pro 2022 for Mac(pdf增強插件)
    您是否花費數小時檢查客戶的PDF文件中的錯誤？別擔心Enfocus PitStop Pro 2022 for Mac版來幫你！Enfocus PitStop Pro 2022 Mac版是目前Adobe Acrobat PDF上最強大的PDF增強插件，主要用於檢查、編輯和批量修改PDF文件，是很多Ac ...
  • PDF Expert for mac(pdf編輯工具) 中文
    Mac上pdf編輯工具哪款好用？小編推薦PDF Expert mac版是一個MacOS上的pdf編輯工具,你可以使用它快速閱讀PDF文件,輕鬆完成PDF編輯工作。您只需點擊幾下即可編輯文字、更改圖片、填寫和簽署文檔。 詳情：PDF Expert for mac(pdf編輯工具) 軟體介紹 PDF E ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類