动态

详情 返回 返回

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.