熟悉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屬性
vue中的資料雙向繫結
學習的過程是漫長的,只有堅持不懈才能到達到自己的目標。1.vue中資料的雙向繫結採用的時候,資料劫持的模式。其實主要是用了es5中的object.defineproperty 來劫持每個屬性的getter,和setter。這也正是vue不相容ie8以下的原因。2.object.defineproer...
Vue3 0學習筆記 表單資料雙繫結
input資料雙向繫結 v model指令 textarea資料雙向繫結 textarea只需寫單個標籤 當然加上結束標籤也沒問題 checkbox繫結boolean變數 選項一checkbox繫結陣列 選項一選項二 選項三checkbox繫結字串帶true value和false value 帶f...
Vue3 0系列(Vue3 0是如何變快的 )
來說一說為什麼performance 效能比vue 2.x快1.2 2倍 這裡先提供兩個 2.1 diff演算法優化 例子 我是段落 也就是說,vue3在渲染的時候,給會改變的元素新增了靜態標記 import from vue export function render ctx,cache,pro...