沐鳴總代_對vue雙向綁定的理解?



,我們先從單向綁定切入,

,理解ViewModel,class Vue { constructor(options) { this.$options = options; this.$data = options.data; // 對data選項做響應式處理 observe(this.$data); // 代理data到vm上 proxy(this); // 執行編譯 new Compile(options.el, this); } },三、如何實現雙向數據,class Compile { constructor(el, vm) { this.$vm = vm; this.$el = document.querySelector(el); // 獲取dom if (this.$el) { this.compile(this.$el); } } compile(el) { const childNodes = el.childNodes; Array.from(childNodes).forEach((node) => { // 遍歷子元素 if (this.isElement(node)) { // 判斷是否為節點 console.log(“編譯元素” + node.nodeName); } else if (this.isInterpolation(node)) { console.log(“編譯插值⽂本” + node.textContent); // 判斷是否為插值文本 {{}} } if (node.childNodes && node.childNodes.length > 0) { // 判斷是否有子元素 this.compile(node); // 對子元素進行遞歸遍歷 } }); } isElement(node) { return node.nodeType == 1; } isInterpolation(node) { return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent); } },關係圖如下,當用戶填寫表單時,View的狀態就被更新了,如果此時可以自動更新Model的狀態,那就相當於我們把Model和View做了雙向綁定,function observe(obj) { if (typeof obj !== “object” || obj == null) { return; } new Observer(obj); } class Observer { constructor(value) { this.value = value; this.walk(value); } walk(obj) { Object.keys(obj).forEach((key) => { definereactive(obj, key, obj[key]); }); } },單向綁定非常簡單,就是把Model綁定到View,當我們用JavaScript代碼更新Model時,View就會自動更新,雙向綁定就很容易聯想到了,在單向綁定的基礎,用戶更新了View,Model的數據也自動被更新了,這種情況就是雙向綁定,舉個栗子,