VUE 数据驱动

模板字符串转换成===>>>虚拟DOM（vnode）

  
    
    
    
  
  
    

      一级
      

        二级
        
三级
      
    
    
  

执行效果如下：

编写一个根据路径获取对象路径的方法：

let obj = {
        a: {
          b: {
            c: {
              d: 1,
            },
          },
        },
      };
 function getPropsByPath(obj, path) {
        let keys = path.split(".");
        let targetObj = obj;
        let prop;
        while ((prop = keys.shift())) {
          if (!targetObj[prop]) {
            alert(`属性：${prop} 不存在`);
            break;
          }
          targetObj = targetObj[prop];
        }
        return targetObj;
 }
console.log(getPropsByPath(obj, "a.b.c.d"));

// 把虚拟dom转换成真实dom
function parseVNode(vnode) {
let type = vnode.type;
let data = vnode.data;
let realDom = null;
if (type === 1) {
realDom = document.createElement(vnode.tag);
if (data) {
for (let k in data) {
realDom.setAttribute(k, data[k]);
}
}
if (vnode.children && 0 in vnode.children) {
for (let i = 0; i < vnode.children.length; i++) {
realDom.appendChild(parseVNode(vnode.children[i]));
}
}
} else if (type === 3) {
return document.createTextNode(vnode.value);
}
return realDom;
}
console.log(parseVNode(compiler(document.getElementById(“root”))));