vue資料雙向繫結的原理

2021-10-10 07:12:33 字數 718 閱讀 7468

vue.js 則是採用資料劫持結合發布者-訂閱者模式的方式,通過object.defineproperty()來劫持各個屬性的setter,getter,在資料變動時發布訊息給訂閱者

當我們訪問或設定物件的屬性的時候,都會觸發相對應的函式,然後在這個函式裡返回或設定屬性的值。

既然如此,我們當然可以在觸發函式的時候動一些手腳做點我們自己想做的事情,這也就是「劫持」操作。

在vue中其實就是通過object.defineproperty來劫持物件屬性的setter和getter操作,並「種下」乙個***,當資料發生變化的時候發出通知。

object.defineproperty(obj,prop,descriptor)

obj:目標物件

prop:需要定義的屬性或方法的名稱

descriptor:目標屬性所擁有的特性

可供定義的特性列表

value:屬性的值

writable:如果為false,屬性的值就不能被重寫。

get: 一旦目標屬性被訪問就會調回此方法,並將此方法的運算結果返回使用者。

set:一旦目標屬性被賦值,就會調回此方法。

configurable: 如果為false,則任何嘗試刪除目標屬性或修改屬性性以下特性(writable, configurable, enumerable)的行為將被無效化。

enumerable: 是否能在for…in迴圈中遍歷出來或在object.keys中列舉出來。

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...