Vue2資料雙向繫結原理

2021-09-29 13:18:02 字數 1165 閱讀 6032

let oldarrayprototype=array.prototype;

//先拿到原來陣列原型上的方法

let proto=object.

create

(oldarrayprototype)

;//轉殖陣列原型物件

['push'

,'shift'

,'unshift'

,'pop'

,'reverse'

,'sort'

].array.

foreach

(method =>})

;//把乙個物件的每一屬性都轉化成可觀測物件

function

observer

(target)

if(array.

isarray

(target))}

else}}

//使乙個物件轉化成可觀測物件

function

definerective

(target,key,value)

,set

(newvalue)}}

)}//缺點1:如果屬性不存在,新增的屬性不會是響應式的(因為只迴圈當前存在的屬性)

function

updateview()

//使用object.defineproperty 就是可以重新定義屬性,給屬性增加getter和setter

/* let data=};

observer;//寫個方法觀察資料,觀察完之後去更改資料

data.name='jw';

data.age.n=200;

data.age=;//給age新賦的物件沒有被set和get,不會更新

data.age.n=300; */

let data=

observer

(data)

; data.age.

push(4

);/* 需要對陣列上的方法進行重寫 push shift unshift pop push reverse sort,不能直接更改array.prototype.push=function () ,因為直接把原型上的方法重寫會導致未被觀察的資料也會被重寫,應該新建立乙個方法,讓被觀察後的物件屬性值為陣列的話能找到該方法 */

vue雙向資料繫結原理

vue應用的是mvvm框架,view和model分離,然後通過vm雙向資料繫結,div 原生物件即資料 var data 建立乙個 viewmodel 例項 var vm new vue 然而乙個動態資料的繫結,是怎麼實現的呢,首先vue利用es5的defineproperty方法裡的get,set...

vue雙向資料繫結原理

text id text show p var text document.getelementbyid text show document.getelementbyid show var model object.defineproperty model,name set function ne...

vue資料雙向繫結原理

vue的資料雙向繫結的小例子 html index.js function selfvue data,el,exp 對data的每一層級的屬性進行監聽,如果變化執行notify observe data 初始化模板資料的值 el.innerhtml this data exp new watcher...