vue3 0中的雙向資料繫結方法

熟悉vue的人都知道在vue2.x之前都是使用object.defineproperty來實現雙向資料繫結的

而在vue3.0中這個方法被取代了

替換不是因為不好，是因為有更好的方法使用效率更高

object.defineproperty的缺點：

1. 在vue中，object.defineproperty無法監控到陣列下標的變化，

導致直接通過陣列的下標給陣列設定值，不能實時響應。

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

目前只針對以上方法做了hack處理，所以恰陣列屬性是檢測不到的，有侷限性。

2. object.defineproperty只能劫持物件的屬性,因此我們需要對每個物件的每個屬性進行遍歷。

vue裡，是通過遞迴以及遍歷data物件來實現對資料的監控的，

如果屬性值也是物件那麼需要深度遍歷,顯然如果能劫持乙個完整的物件，不管是對操作性還是效能都會有乙個很大的提公升。

而要取代它的proxy有以下兩個優點：

1. 可以劫持整個物件，並返回乙個新物件

2. 有13種劫持操作

proxy是 es6 中新增的乙個特性，翻譯過來意思是"**"，用在這裡表示由它來「**」某些操作。 proxy 讓我們能夠以簡潔易懂的方式控制外部對物件的訪問。其功能非常類似於設計模式中的**模式。

proxy 可以理解成，在目標物件之前架設一層「攔截」，外界對該物件的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。

使用 proxy 的核心優點是可以交由它來處理一些非核心邏輯（如：讀取或設定物件的某些屬性前記錄日誌；設定物件的某些屬性值前，需要驗證；某些屬性的訪問控制等）。從而可以讓物件只需關注於核心邏輯，達到關注點分離，降低物件複雜度等目的。

基本用法：

let p = new proxy(target, handler);

引數：

target: 是用proxy包裝的被**物件（可以是任何型別的物件，包括原生陣列，函式，甚至另乙個**）。

handler: 是乙個物件，其宣告了**target 的一些操作，其屬性是當執行乙個操作時定義**的行為的函式。

p是proxy物件，當其他操作對p進行更改的時候，會執行handler物件的方法。proxy有13種資料劫持的操作，常用的handler處理方法：

get: 讀取值，

set: 獲取值，

has: 判斷物件是否擁有該屬性，

construct: 建構函式

舉個例子：

let obj ={};
let handler = 被讀取`);
return property in target ? target[property] : 3;
},set(target, property, value) 被設定為 $`);
target[property] =value;
}} let p = new
proxy(obj, handler);
p.name = 'tom' //
name 被設定為 tom
p.age; //
age 被讀取 3

更多的proxy屬性方法參考mdn proxy

observe(data) ,
set(target, key, value) );
return
res;
}} 
this.$data = new
proxy(data, handler);
}

這段**裡把**器返回的物件**到this.$data，即this.$data是**後的物件，外部每次對this.$data進行操作時，實際上執行的是這段**裡handler物件上的方法。

注：這兒用到了reflect屬性，這也是es6裡面的，不知道的去這兒看看吧。reflect屬性

vue3 0中的雙向資料繫結方法

vue中的資料雙向繫結

Vue3 0學習筆記表單資料雙繫結

Vue3 0系列（Vue3 0是如何變快的）

vue3 0中的雙向資料繫結方法

vue中的資料雙向繫結

Vue3 0學習筆記 表單資料雙繫結

Vue3 0系列（Vue3 0是如何變快的 ）

相關推薦

Vue3 0學習筆記表單資料雙繫結

Vue3 0系列（Vue3 0是如何變快的）