>[warning]雙大括號模板講解_虛擬DOM_Compile **** 1. 這里新建Compile類, 用于處理DOM標簽 2. 給Vue擴展mounted方法 代碼如下: ~~~ <script> // 1. 創建類Compile, (用于解析DOM節點), 接收根DOM和vue實例對象 function Compile(el, vm) { this.vm = vm; // vue實例 this.el = document.querySelector(el); // 根DOM this.fragment = this.nodeToFragment(this.el); // 刪除原始DOM, 生成新的虛擬DOM樹 this.compileElement(this.fragment); // 編譯DOM節點特殊字符 this.el.appendChild(this.fragment); // 把虛擬DOM添加到真正的DOM上 // 解析DOM->初始化->編譯(綁定訂閱器) } // 2. 給Compile實例對象擴展方法 Compile.prototype = { // 用于生成虛擬DOM nodeToFragment(el) { // createDocumentFragment() 創建DOM節點, 但它不是主DOM節點一部分, 一般用法是將子元素添加到這個DOM上, 然后將DOM添加到真正的主DOM上, 因為這個創建的DOM是在內存中的. let fragment = document.createDocumentFragment(); // 獲取根節點的第一個孩子節點 let child = el.firstChild; // 遞歸查找所有子節點, 并且掛載到虛擬DOM上 while (child) { // 將DOM元素移入fragment中, 重點注意: 如果使用appendChid方法將原dom樹中的節點添加到DocumentFragment中時，會刪除原來的節點。 fragment.appendChild(child); // 所以這里獲取el下的第一個孩子, 不會一直指向一個標簽 child = el.firstChild; } // 返回虛擬DOM return fragment; }, // 3. 解析虛擬DOM節點夾著的值 compileElement(el) { let childNodes = el.childNodes; let self = this; // 遍歷每個DOM節點 [].slice.call(childNodes).forEach(function (node) { let reg = /\{\{(.*)\}\}/; let text = node.textContent; if (self.isTextNode(node) && reg.test(text)) { // 判斷節點是否有內容, 而且內容是否是{{}}這種格式的 // reg.exec(text) 提取{{}}和里面內容, 就是屬性key值 // 4. 注冊文本節點監聽器(并初始化值) self.compileText(node, reg.exec(text)[1]); } // 判斷是否還有子節點, 如果有則繼續遞歸子節點 if (node.childNodes && node.childNodes.length) { self.compileElement(node); } }) }, // 5. 節點監視器 compileText(node, exp) { let self = this; let initText = this.vm[exp]; self.updateText(node, initText); // 6. 給節點新建個監視器, 監視key的變化, 變化就會回調這個function new Watcher(this.vm, function (val) { self.updateText(node, val); }, exp); }, // 7. 更新某個節點的值 updateText(node, value) { node.textContent = typeof value === 'undefined' ? '' : value; }, // 判斷是否是文本節點 isTextNode: function (node) { return node.nodeType == 3; } }; function Vue(options, exp){ this.data = options.data(); let self = this; Object.keys(this.data).forEach(function(key){ self.proxyKeys(key); }); observe(this.data); // 8. 操作DOM部分交給Compile處理 new Compile(options.el, this); // 9. 給Vue掛載mounted方法 options.mounted.call(this); } Vue.prototype = { proxyKeys: function(key){ let self = this; Object.defineProperty(this, key, { get: function(){ return self.data[key]; }, set: function(newVal){ self.data[key] = newVal } }) } } </script> <div id="app">{{userName}}</div> <script> new Vue({ el: "#app", data () { return { "userName": "hello VueJS" } }, // 10. 使用mounted方法 mounted () { setTimeout(()=>{ this.userName = "漂亮"; }, 2000); } }); </script> ~~~ [當前頁源代碼](https://github.com/lidongxuwork126com/ldx_vue/tree/master/%E4%BB%BFVue%E6%BA%90%E7%A0%81) 好了, 到這里基本上, 我們Vue的具體實現過程, 大家應該有所了解了