}---}
class observer
this.data = data;
this.init()
}init() )
}observerdata(data, key, val)
return val
},set(newvalue)
val = newvalue;
new observer(val)
// 資料的修改，執行訂閱函式的觸發
dep.targetfuncs()}})
}}class dep
addlistenfunc(obj)
// 觸發所有的訂閱方法
targetfuncs() )
}}dep.target= null
// 觀察者
class watcher
init()
// 訂閱者
changeinputvalue()
}const utils = )
el.addeventlistener('input', (e) => )
},changemodelvalue(data, key, val)
newdata[keys[keys.length - 1]] = val;
},// 設定}的顯示內容
getnodehtml(data, el, content) \}/;
let oldcontent = el.textcontent;
content.foreach(val => )
})this.updatetextcontent(content, oldcontent, el, data)
},updatetextcontent(content, oldcontent, el, data) \}/;
content.foreach(val => )
el.textcontent = oldcontent
},// 取資料
getvalue(data, keys) )
return newdata
}}class mvvm )
init() );
// 資料劫持
new observer(this.$data)
}initdom()
compiler(node)
})} else if (node.nodetype === 3) \}/g;
if (reg.test(node.textcontent))
}// 有子元素的繼續判斷
簡單實現，供參考。
Vue 模板渲染 條件渲染 列表渲染
當獲取到後端資料後，我們會把它按照一定的規則載入到寫好的模板中，輸出成在瀏覽器中顯示的 html，這個過程就稱之為渲染。而 vue.js 是在前端 即瀏覽器內 進行的模板 渲染。1.前後端渲染對比 前端渲染 的優勢 是在瀏覽器裡利用 js 把資料和 html 模板進行組合，業務分離，後端只需要提供資...
vue資料渲染
在webpack.dev.conf.js裡它後面const portfinder require portfinder 加入 const express require express var goodsdata require mock goos.json 載入本地資料檔案 var result ...
vue 渲染流程
1 dom 節點樹 高效的更新所有這些節點會是比較困難的，因為原生的dom節點屬性很多，渲染效能差。2 虛擬 dom 虛擬 dom 是我們對由 vue 元件樹建立起來的整個 vnode 樹的稱呼。vue 的模板實際是編譯成了render 函式。3 渲染流程 說明 1 模板template主要通過cr...