vue雙向繫結原理分析

2022-07-11 02:51:09 字數 2777 閱讀 4726

當我們學習angular或者vue的時候,其雙向繫結為我們開發帶來了諸多便捷,今天我們就來分析一下vue雙向繫結的原理。

vue.js 則是採用資料劫持結合發布者-訂閱者模式的方式,通過object.defineproperty()來劫持各個屬性的setter,getter,在資料變動時發布訊息給訂閱者,觸發相應的監聽**。我們先來看object.defineproperty()這個方法:

var obj  = {};

object.defineproperty(obj, 'name', ,

set: function (newval)

})obj.name = 'fei';//在給obj設定name屬性的時候,觸發了set這個方法

var val = obj.name;//在得到obj的name屬性,會觸發get方法

已經了解到vue是通過資料劫持的方式來做資料繫結的,其中最核心的方法便是通過object.defineproperty()來實現對屬性的劫持,那麼在設定或者獲取的時候我們就可以在get或者set方法裡假如其他的觸發函式,達到監聽資料變動的目的,無疑這個方法是本文中最重要、最基礎的內容之一。

我們知道通過object.defineproperty()可以實現資料劫持,是的屬性在賦值的時候觸發set方法,

html

>

lang="en">

documenttitle>

head>

id="demo">div

>

var obj = {};

var demo = document.queryselector('#demo')

var inp = document.queryselector('#inp')

object.defineproperty(obj, 'name', ,

set: function (newval)

})inp.addeventlistener('input', function(e) );

obj.name = 'fei';//在給obj設定name屬性的時候,觸發了set這個方法

script>

body>

html>

當然要是這麼粗暴,肯定不行,效能會出很多的問題。

3.1 observer用來實現對每個vue中的data中定義的屬性迴圈用object.defineproperty()實現資料劫持,以便利用其中的setter和getter,然後通知訂閱者,訂閱者會觸發它的update方法,對檢視進行更新。

3.2 我們介紹為什麼要訂閱者,在vue中v-model,v-name,}等都可以對資料進行顯示,也就是說假如乙個屬性都通過這三個指令了,那麼每當這個屬性改變的時候,相應的這個三個指令的html檢視也必須改變,於是vue中就是每當有這樣的可能用到雙向繫結的指令,就在乙個dep中增加乙個訂閱者,其訂閱者只是更新自己的指令對應的資料,也就是v-model='name'和}有兩個對應的訂閱者,各自管理自己的地方。每當屬性的set方法觸發,就迴圈更新dep中的訂閱者。

廣州品牌設計公司

4.1 observer實現,主要是給每個vue的屬性用object.defineproperty(),**如下:

function definereact

ive (obj, key, val)

return val;

},set: function (newval)

})} function observe(obj, vm) )

}

4.2實現compile: compile的目的就是解析各種指令稱真正的html。

function compile(node, vm) 

}compile.prototype =

return frag;

},compileelement: function(node, vm) \}/;

//節點型別為元素(input元素這裡)

if(node.nodetype === 1) );

new watcher(vm, node, name, 'value');//建立新的watcher,會觸發函式

向對應屬性的dep陣列中新增訂閱者,}};

}//節點型別為text

if(node.nodetype === 3) }}

}

4.3 watcher實現

function watcher(vm, node, name, type) 

watcher.prototype = ,

// 獲取data的屬性值

get: function()

}

4.4 實現dep來為每個屬性新增訂閱者

function dep() 

dep.prototype = ,

notify: function() )

}}

這樣一來整個資料的雙向繫結就完成了。

首先我們為每個vue屬性用object.defineproperty()實現資料劫持,為每個屬性分配乙個訂閱者集合的管理陣列dep;然後在編譯的時候在該屬性的陣列dep中新增訂閱者,v-model會新增乙個訂閱者,}也會,v-bind也會,只要用到該屬性的指令理論上都會,接著為input會新增監聽事件,修改值就會為該屬性賦值,觸發該屬性的set方法,在set方法內通知訂閱者陣列dep,訂閱者陣列迴圈呼叫各訂閱者的update方法更新檢視。

vue雙向繫結原理分析

當我們學習angular或者vue的時候,其雙向繫結為我們開發帶來了諸多便捷,今天我們就來分析一下vue雙向繫結的原理。1.vue雙向繫結原理 vue.js 則是採用資料劫持結合發布者 訂閱者模式的方式,通過object.defineproperty 來劫持各個屬性的setter,getter,在資...

Vue雙向資料繫結原理分析

當我們在前端開發中採用mv 的模式時,m model,指的是模型,也就是資料,v view,指的是檢視,也就是頁面展現的部分。通常,我們需要編寫 將從伺服器獲取的資料進行 渲染 展現到檢視上。每當資料有變更時,我們會再次進行渲染,從而更新檢視,使得檢視與資料保持一致。也就是 而另一方面,頁面也會通過...

Vue 雙向資料繫結原理分析

當我們在前端開發中採用mv 的模式時,m model,指的是模型,也就是資料,v view,指的是檢視,也就是頁面展現的部分。通常,我們需要編寫 將從伺服器獲取的資料進行 渲染 展現到檢視上。每當資料有變更時,我們會再次進行渲染,從而更新檢視,使得檢視與資料保持一致。也就是 paste image....