用 vnode 来描述一个Vue.js DOM结构

  • 虚拟节点就是用一个对象来描述真实的dom元素

源码如下:

 1 function $createElement(tag,data,...children){
 2     let key = data.key;
 3     delete data.key;
 4     children = children.map(child=>{
 5         if(typeof child === 'object'){
 6             return child
 7         }else{
 8             return vnode(undefined,undefined,undefined,undefined,child)
 9         }
10     })
11     return vnode(tag,props,key,children);
12 } 
13 export function vnode(tag,data,key,children,text){
14     return {
15         tag, // 表示的是当前的标签名
16         data, // 表示的是当前标签上的属性
17         key, // 唯一表示用户可能传递
18         children,
19         text
20     }
21 }

 

posted on 2020-06-11 09:59  ming1025  阅读(845)  评论(0编辑  收藏  举报