前言

經常看到講解Vue2的虛擬Dom diff原理的，但很多都是在原代碼的基礎上添加些注釋等等，這里從0行代碼開始實現一個Vue2的虛擬DOM

實現VNode

src/core/vdom/Vnode.js

export class VNode{ constructor (  tag, //標簽名  children,//孩子[VNode,VNode],  text, //文本節點  elm //對應的真實dom對象 ){  this.tag = tag;  this.children = children  this.text = text;  this.elm = elm; }}export function createTextNode(val){ //為什么這里默認把elm置為undefined，不直接根據tag 用document.createElement(tagName)把elm賦值？而要等后面createElm時候再賦值呢？ return new VNode(undefined,undefined,String(val),undefined)}export function createCommentNode(tag,children){ if(children){  for(var i=0;i<children.length;i++){   var child = children[i];   if(typeof child == 'string'){    children[i] = createTextNode(child)   }  } } return new VNode(tag,children,undefined,null)}

定義一個Vnode類， 創建節點分為兩類，一類為text節點，一類非text節點

src/main.js

import {VNode,createCommentNode} from './core/vdom/vnode'var newVonde = createCommentNode('ul',[createCommentNode('li',['item 1']),createCommentNode('li',['item 2']),createCommentNode('li',['item 3'])])

在main.js就可以根據Vnode 生成對應的Vnode對象，上述代碼對應的dom表示

<ul><li>item1</li><li>item2</li><li>item3</li></ul>

先實現不用diff把Vnode渲染到頁面中來

為什么先來實現不用diff渲染Vnode的部分，這里也是為了統計渲染的時間，來表明一個道理。并不是diff就比非diff要開，虛擬DOM并不是任何時候性能都比非虛擬DOM 要快

先來實現一個工具函數，不熟悉的人可以手工敲下代碼 熟悉下

// 真實的dom操作// src/core/vdom/node-ops.jsexport function createElement (tagName) { return document.createElement(tagName)}export function createTextNode (text) { return document.createTextNode(text)}export function createComment (text) { return document.createComment(text)}export function insertBefore (parentNode, newNode, referenceNode) { parentNode.insertBefore(newNode, referenceNode)}export function removeChild (node, child) { node.removeChild(child)}export function appendChild (node, child) { node.appendChild(child)}export function parentNode (node) { return node.parentNode}export function nextSibling (node) { return node.nextSibling}export function tagName (node) { return node.tagName}export function setTextContent (node, text) { node.textContent = text}export function setAttribute (node, key, val) { node.setAttribute(key, val)}

src/main.js

import {VNode,createCommentNode} from './core/vdom/vnode'import patch from './core/vdom/patch'var container = document.getElementById("app");var oldVnode = new VNode(container.tagName,[],undefined,container);var newVonde = createCommentNode('ul',[createCommentNode('li',['item 1']),createCommentNode('li',['item 2']),createCommentNode('li',['item 3'])])console.time('start');patch(oldVnode,newVonde); //渲染頁面console.timeEnd('start');