Vue是使用JS原生的Object.defineProperty() 來實現雙向綁定，
其中會產生相對應的get() set()方法，作為底層監控資料的變化。(其實ES6的Proxy也可達到同樣效果)
下面提供一個範例
//JS
var model = {}
let value = undefined
Object.defineProperty(model, "value", {
get(){
return value;
},
set(newVal) {
value = newVal;
document.getElementById("input").value = newVal
document.getElementById("display").innerHTML = newVal
}
})
document.getElementById("input").addEventListener("keyup", function (event) {
model.value = event.target.value;
console.log("綁定的資料異動:",model.value)
})
//HTML
畫面：
Vue架構
首先我們都知道Vue是基於MVVM的架構如下圖，分別為View,ViewModel,Model，這麼做有什麼好處呢，我們知道以前也有個MVC的架構，在MVC架構下我們元件都是共用在複雜邏輯的畫面時就會造成以下圖的問題，有時候光要找問題就很頭痛了，所以才衍生出現在有MVVM或是Flux架構，這邊我們我們講Vue就來說說MVVM架構，多個ViewModel就有點像個中繼站負責我們View跟Model之間的橋樑
MVC：
MVVM：
簡單解釋如下：
View：
為我們UI的部分負責呈現我們DOM
ViewModel：
為負責同步View及Model之間的橋樑，讓畫面的更新可以即時同步到資料上
Model：
就是我們的資料
vue實際做法
至於綁定的實際做法細節還分為以下做解釋，如下圖
Observer相當於Model層觀察vue實例中的data數據，當數據發生變化時，通知Watcher訂閱者。
Compile指令解析器位於View層，初始化View的視圖，將數據變化與更新函數綁定，傳給Watcher訂閱者。
Watcher是整個模型的核心，對應ViewModel層，連接Observer和Compile。所有的Watchers存於Dep訂閱器中，Watcher將Observer監聽到的數據變化對應相應的回調函數，處理數據，反饋給View層更新界面視圖。
參考文章：
沒有留言:
張貼留言