在vue2中，什麼是雙向綁定，為什麼vue3要進行優化？

来源:https://www.cnblogs.com/smileZAZ/p/18166424
-Advertisement-
Play Games

一、什麼是雙向綁定 我們先從單向綁定切入單向綁定非常簡單，就是把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新雙向綁定就很容易聯想到了，在單向綁定的基礎上，用戶更新了View，Model的數據也自動被更新了，這種情況就是雙向綁定舉個慄子 當用戶填寫表 ...


一、什麼是雙向綁定

我們先從單向綁定切入單向綁定非常簡單，就是把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新雙向綁定就很容易聯想到了，在單向綁定的基礎上，用戶更新了View，Model的數據也自動被更新了，這種情況就是雙向綁定舉個慄子

 當用戶填寫表單時，View的狀態就被更新了，如果此時可以自動更新Model的狀態，那就相當於我們把Model和View做了雙向綁定關係圖如下

二、雙向綁定的原理是什麼

我們都知道 Vue 是數據雙向綁定的框架，雙向綁定由三個重要部分構成

  • 數據層（Model）：應用的數據及業務邏輯
  • 視圖層（View）：應用的展示效果，各類UI組件
  • 業務邏輯層（ViewModel）：框架封裝的核心，它負責將數據與視圖關聯起來

而上面的這個分層的架構方案，可以用一個專業術語進行稱呼：MVVM這裡的控制層的核心功能便是 “數據雙向綁定” 。自然，我們只需弄懂它是什麼，便可以進一步瞭解數據綁定的原理

理解ViewModel

它的主要職責就是：

  • 數據變化後更新視圖
  • 視圖變化後更新數據

當然，它還有兩個主要部分組成

  • 監聽器（Observer）：對所有數據的屬性進行監聽
  • 解析器（Compiler）：對每個元素節點的指令進行掃描跟解析,根據指令模板替換數據,以及綁定相應的更新函數

三、實現雙向綁定

我們還是以Vue為例，先來看看Vue中的雙向綁定流程是什麼的

  1. new Vue()首先執行初始化，對data執行響應化處理，這個過程發生Observe中
  2. 同時對模板執行編譯，找到其中動態綁定的數據，從data中獲取並初始化視圖，這個過程發生在Compile中
  3. 同時定義⼀個更新函數和Watcher，將來對應數據變化時Watcher會調用更新函數
  4. 由於data的某個key在⼀個視圖中可能出現多次，所以每個key都需要⼀個管家Dep來管理多個Watcher
  5. 將來data中數據⼀旦發生變化，會首先找到對應的Dep，通知所有Watcher執行更新函數

流程圖如下：

實現

先來一個構造函數：執行初始化，對data執行響應化處理

class Vue {  
  constructor(options) {  
    this.$options = options;  
    this.$data = options.data;  
        
    // 對data選項做響應式處理  
    observe(this.$data);  
        
    // 代理data到vm上  
    proxy(this);  
        
    // 執行編譯  
    new Compile(options.el, this);  
  }  
}

對data選項執行響應化具體操作

function observe(obj) {  
  if (typeof obj !== "object" || obj == null) {  
    return;  
  }  
  new Observer(obj);  
}  
  
class Observer {  
  constructor(value) {  
    this.value = value;  
    this.walk(value);  
  }  
  walk(obj) {  
    Object.keys(obj).forEach((key) => {  
      defineReactive(obj, key, obj[key]);  
    });  
  }  
}

編譯Compile

對每個元素節點的指令進行掃描跟解析,根據指令模板替換數據,以及綁定相應的更新函數

class Compile {  
  constructor(el, vm) {  
    this.$vm = vm;  
    this.$el = document.querySelector(el);  // 獲取dom  
    if (this.$el) {  
      this.compile(this.$el);  
    }  
  }  
  compile(el) {  
    const childNodes = el.childNodes;   
    Array.from(childNodes).forEach((node) => { // 遍歷子元素  
      if (this.isElement(node)) {   // 判斷是否為節點  
        console.log("編譯元素" + node.nodeName);  
      } else if (this.isInterpolation(node)) {  
        console.log("編譯插值⽂本" + node.textContent);  // 判斷是否為插值文本 {{}}  
      }  
      if (node.childNodes && node.childNodes.length > 0) {  // 判斷是否有子元素  
        this.compile(node);  // 對子元素進行遞歸遍歷  
      }  
    });  
  }  
  isElement(node) {  
    return node.nodeType == 1;  
  }  
  isInterpolation(node) {  
    return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);  
  }  
}

依賴收集

視圖中會用到data中某key，這稱為依賴。同⼀個key可能出現多次，每次都需要收集出來用⼀個Watcher來維護它們，此過程稱為依賴收集多個Watcher需要⼀個Dep來管理，需要更新時由Dep統⼀通知

實現思路

  1. defineReactive時為每⼀個key創建⼀個Dep實例
  2. 初始化視圖時讀取某個key，例如name1，創建⼀個watcher1
  3. 由於觸發name1的getter方法，便將watcher1添加到name1對應的Dep中
  4. 當name1更新，setter觸發時，便可通過對應Dep通知其管理所有Watcher更新
// 負責更新視圖  
class Watcher {  
  constructor(vm, key, updater) {  
    this.vm = vm  
    this.key = key  
    this.updaterFn = updater  
  
    // 創建實例時，把當前實例指定到Dep.target靜態屬性上  
    Dep.target = this  
    // 讀一下key，觸發get  
    vm[key]  
    // 置空  
    Dep.target = null  
  }  
  
  // 未來執行dom更新函數，由dep調用的  
  update() {  
    this.updaterFn.call(this.vm, this.vm[this.key])  
  }  
}

聲明Dep

class Dep {  
  constructor() {  
    this.deps = [];  // 依賴管理  
  }  
  addDep(dep) {  
    this.deps.push(dep);  
  }  
  notify() {   
    this.deps.forEach((dep) => dep.update());  
  }  
}

創建watcher時觸發getter

class Watcher {  
  constructor(vm, key, updateFn) {  
    Dep.target = this;  
    this.vm[this.key];  
    Dep.target = null;  
  }  
}

依賴收集，創建Dep實例

function defineReactive(obj, key, val) {  
  this.observe(val);  
  const dep = new Dep();  
  Object.defineProperty(obj, key, {  
    get() {  
      Dep.target && dep.addDep(Dep.target);// Dep.target也就是Watcher實例  
      return val;  
    },  
    set(newVal) {  
      if (newVal === val) return;  
      dep.notify(); // 通知dep執行更新方法  
    },  
  });  
}

四.vue3.0里為什麼要用 Proxy API 替代 defineProperty API ？

1、Object.defineProperty

定義：Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，並返回此對象

為什麼能實現響應式

通過defineProperty 兩個屬性，get及set

  • get

屬性的 getter 函數，當訪問該屬性時，會調用此函數。執行時不傳入任何參數，但是會傳入 this 對象（由於繼承關係，這裡的this並不一定是定義該屬性的對象）。該函數的返回值會被用作屬性的值

  • set

屬性的 setter 函數，當屬性值被修改時，會調用此函數。該方法接受一個參數（也就是被賦予的新值），會傳入賦值時的 this 對象。預設為 undefined

下麵通過代碼展示：

定義一個響應式函數defineReactive

function update() {
    app.innerText = obj.foo
}

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get ${key}:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                val = newVal
                update()
            }
        }
    })
}

調用defineReactive，數據發生變化觸發update方法，實現數據響應式

const obj = {}
defineReactive(obj, 'foo', '')
setTimeout(()=>{
    obj.foo = new Date().toLocaleTimeString()
},1000)

在對象存在多個key情況下，需要進行遍歷

function observe(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return
    }
    Object.keys(obj).forEach(key => {
        defineReactive(obj, key, obj[key])
    })
}

如果存在嵌套對象的情況，還需要在defineReactive中進行遞歸

function defineReactive(obj, key, val) {
    observe(val)
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get ${key}:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                val = newVal
                update()
            }
        }
    })
}

當給key賦值為對象的時候，還需要在set屬性中進行遞歸

set(newVal) {
    if (newVal !== val) {
        observe(newVal) // 新值是對象的情況
        notifyUpdate()
    }
}

上述例子能夠實現對一個對象的基本響應式，但仍然存在諸多問題

現在對一個對象進行刪除與添加屬性操作，無法劫持到

const obj = {
    foo: "foo",
    bar: "bar"
}
observe(obj)
delete obj.foo // no ok
obj.jar = 'xxx' // no ok

當我們對一個數組進行監聽的時候，並不那麼好使了

const arrData = [1,2,3,4,5];
arrData.forEach((val,index)=>{
    defineProperty(arrData,index,val)
})
arrData.push() // no ok
arrData.pop()  // no ok
arrDate[0] = 99 // ok

可以看到數據的api無法劫持到，從而無法實現數據響應式，

所以在Vue2中，增加了set、delete API，並且對數組api方法進行一個重寫

還有一個問題則是，如果存在深層的嵌套對象關係，需要深層的進行監聽，造成了性能的極大問題

小結

  • 檢測不到對象屬性的添加和刪除
  • 數組API方法無法監聽到
  • 需要對每個屬性進行遍歷監聽，如果嵌套對象，需要深層監聽，造成性能問題

2、proxy

Proxy的監聽是針對一個對象的，那麼對這個對象的所有操作會進入監聽操作，這就完全可以代理所有屬性了

在ES6系列中，我們詳細講解過Proxy的使用，就不再述說了

下麵通過代碼進行展示：

定義一個響應式方法reactive

function reactive(obj) {
    if (typeof obj !== 'object' && obj != null) {
        return obj
    }
    // Proxy相當於在對象外層加攔截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`獲取${key}:${res}`)
            return res
        },
        set(target, key, value, receiver) {
            const res = Reflect.set(target, key, value, receiver)
            console.log(`設置${key}:${value}`)
            return res
        },
        deleteProperty(target, key) {
            const res = Reflect.deleteProperty(target, key)
            console.log(`刪除${key}:${res}`)
            return res
        }
    })
    return observed
}

測試一下簡單數據的操作，發現都能劫持

const state = reactive({
    foo: 'foo'
})
// 1.獲取
state.foo // ok
// 2.設置已存在屬性
state.foo = 'fooooooo' // ok
// 3.設置不存在屬性
state.dong = 'dong' // ok
// 4.刪除屬性
delete state.dong // ok

再測試嵌套對象情況，這時候發現就不那麼 OK 了

const state = reactive({
    bar: { a: 1 }
})

// 設置嵌套對象屬性
state.bar.a = 10 // no ok

如果要解決，需要在get之上再進行一層代理

function reactive(obj) {
    if (typeof obj !== 'object' && obj != null) {
        return obj
    }
    // Proxy相當於在對象外層加攔截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`獲取${key}:${res}`)
            return isObject(res) ? reactive(res) : res
        },
    return observed
}

3、總結

Object.defineProperty只能遍歷對象屬性進行劫持

function observe(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return
    }
    Object.keys(obj).forEach(key => {
        defineReactive(obj, key, obj[key])
    })
}

Proxy直接可以劫持整個對象，並返回一個新對象，我們可以只操作新的對象達到響應式目的

function reactive(obj) {
    if (typeof obj !== 'object' && obj != null) {
        return obj
    }
    // Proxy相當於在對象外層加攔截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`獲取${key}:${res}`)
            return res
        },
        set(target, key, value, receiver) {
            const res = Reflect.set(target, key, value, receiver)
            console.log(`設置${key}:${value}`)
            return res
        },
        deleteProperty(target, key) {
            const res = Reflect.deleteProperty(target, key)
            console.log(`刪除${key}:${res}`)
            return res
        }
    })
    return observed
}

Proxy可以直接監聽數組的變化（push、shift、splice）

const obj = [1,2,3]
const proxtObj = reactive(obj)
obj.psuh(4) // ok

Proxy有多達13種攔截方法,不限於apply、ownKeys、deleteProperty、has等等，這是Object.defineProperty不具備的

正因為defineProperty自身的缺陷，導致Vue2在實現響應式過程需要實現其他的方法輔助（如重寫數組方法、增加額外set、delete方法）

// 數組重寫
const originalProto = Array.prototype
const arrayProto = Object.create(originalProto)
['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
  arrayProto[method] = function () {
    originalProto[method].apply(this.arguments)
    dep.notice()
  }
});

// set、delete
Vue.set(obj,'bar','newbar')
Vue.delete(obj),'bar')

Proxy 不相容IE，也沒有 polyfill, defineProperty 能支持到IE9

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


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

-Advertisement-
Play Games
更多相關文章
  • SQL Server實戰三：資料庫表完整性約束及索引、視圖的創建、編輯與刪除
    本文介紹基於Microsoft SQL Server軟體，實現資料庫表完整性約束、索引與視圖的創建、編輯與刪除等操作的方法~ ...
  • [postgres]序列
    前言 序列都是用create sequence命令創建的單行表，常用於為表的行生成唯一的標識符。 相關函數 函數 作用 nextval() 遞增序列並返回新值 currval() 返回最近一次用nextval()函數獲取的指定序列的值 lastval() 返回最近一次用nextval()函數獲取的任 ...
  • Slave SQL線程與PXB FTWRL死鎖問題分析
    1. 問題背景 2.27號凌晨生產環境MySQL備庫在執行備份期間出現因FLUSH TABLES WITH READ LOCK未釋放導致備庫複製延時拉大，慢日誌內看持鎖接近25分鐘未釋放。 版本： MySQL 5.7.21 PXB 2.4.18 慢查詢日誌： 備份腳本中的備份命令： mysql_ki ...
  • 什麼是SQL 語句中相關子查詢與非相關子查詢
    要理解相關子查詢和非相關子查詢，我們得首先理解什麼是子查詢，子查詢是指在一個查詢語句中嵌套的另一個查詢語句。 ...
  • SqlServer中根據某幾列獲取重覆的數據將其刪除並保留最新一條
    前言 OLAP概念誕生於1993年，工具則出現在更早以前，有史可查的第一款OLAP工具是1975年問世的Express，後來走進千家萬戶的Excel也可歸為此類，所以雖然很多數據人可能沒聽過OLAP，但完全沒打過交道的應該很少。 這個概念主要是在大數據圈裡流傳，而在大數據領域里，目前主流的OLAP開 ...
  • Fragment翻蓋動效
    fragment切換動效，基本都是 viewpager+Transformer，但是總有它實現不了的動效，比如從0到3直接過渡，並且過渡需要加上兩者的位移效果 慢動作看到，如果是viewpager，從0到3過程是無法直達的，會有0，1，2，3的過渡效果，並且動畫時機是不可控的 當然，有個自定義方式可 ...
  • 當個View下，使用Drawable入場退場動畫
    效果圖，簡單的入場退場動效，一般情況是不同view之間去添加動畫，某些條件下顯然並不符合需求，需要在單個ImageView下進行的 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintL ...
  • iOS 隱私清單和SDK簽名
    隱私清單： <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><pli ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類