動態

詳情 返回 返回

Vue的雙向數據綁定 - 動態 詳情

何為雙向數據綁定?

雙向數據綁定即為
1、當與用户交互時,用户修改視圖上的數據(如文本框等),model中的數據也會跟着改變;
2、當model數據發生改變時,視圖上渲染了該數據的地方也會跟着更新。

如何實現雙向數據綁定?

image.png
數據劫持、觀察者Observer、訂閲者Watcher、Compile解析器

頁面初次渲染

1、使用遞歸劫持數據,為每個對象以及每個對象的屬性添加getter和setter方法(使用ES5的Object.defineProperty);
2、compile解析模板,將模板的變量解析成data中的數據;
3、為節點添加監聽數據的訂閲者watcher,並且自身還有update更新函數。

view改變->model更新

1、view更新,觸發事件;
2、在事件回調中調用數據的setter方法,更新model中的數據;
3、在setter方法中,數據的oberve觀察到了數據的變化,向訂閲者們發出通知dep.notice();
4、訂閲者們收到通知,並調用自身的update()方法,觸發Compile中綁定的回調,重新解析模板。

model改變->view更新

以上的3-4步

(自己的理解,如有問題,請指出!)

user avatar mannayang 頭像 louzi_xl 頭像 original_intention 頭像 ucrx2py9 頭像 xuexiangjys 頭像
點贊 5 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.