模擬實現Vue的資料雙向繫結

在使用vue開發時，對於元素，通過指令v-model就可以達到乙個資料雙向繫結的效果，在這兒，我們不討論v-model的實現原理，就只簡單討論並模擬實現乙個資料雙向繫結。

資料雙向繫結的特點是雙向：當我們在頁面中的操作影響資料時，會直接改變資料（頁面——>資料）；當我們在**中改變資料時，對應的變化會體現在頁面的展示中（資料——>頁面）。

vue 2.0版本中採用資料劫持的方式讓資料變成響應式資料，3.0版本採用**proxy方式讓資料變成響應式資料，響應式資料可以實現資料到頁面單向流，改變資料時會立刻將變化體現在頁面中，在此基礎上，我們繼續新增頁面到資料的單向流，進而實現雙向繫結。詳細如下：

實現乙個簡單的雙向繫結：

// html結構

"input"
type
="text"
>
class
="show-panel"
>
div>
// 雙向繫結特點：在頁面中操作，會改變資料；改變資料，變化會體現在頁面中
let inputele = document.
queryselector
('#input'
)let showele = document.
queryselector
('.show-panel'
)inputele.
addeventlistener
('input'
,(e)
=>
)let obj =
object.
defineproperty
(obj,
'value',,
set:
(newval)
=>})
obj.value =
'哈哈哈'
// 雙向繫結特點：在頁面中操作，會改變資料；改變資料，變化會體現在頁面中

let inputele = document.
queryselector
('#input'
)let showele = document.
queryselector
('.show-panel'
)inputele.
addeventlistener
('input'
,(e)
=>
)let obj =
let proxy =
newproxy
(obj,
,set
:(target, key, value, receiver)
=>})
proxy.value =
'哈哈哈'
				
vue雙向資料繫結核心原理基本模擬實現
vue雙向資料繫結主要是通過 object物件的defineproperty屬性，重寫data的set和get函式來實現的，這裡只會實現最基本的內容，主要實現v model，v bind 和v click三個命令，其他命令也可以自行補充 doctype html utf 8 x ua compati...
				
模擬Vue雙向資料繫結
function eventemit this.callbacks eventemit.prototype.on function eventname,fn this.callbacks eventname push fn eventemit.prototype.emit function even...
				
模擬Vue 中資料雙向繫結
如果使用object.defineproperty,實現乙個最簡單的雙向繫結其實很簡單，只需如下 上面這個demo就是vue雙向繫結最簡化的原理。二 替換元素 想想我們使用vue時的規則 new vue 寫上頁面結構 div id input type text v model text div 我...