1.虚拟dom
虚拟dom既与真实dom所对应。简单理解为vue里节点里的原子。个人理解将其分成三类
vnode-> 组件级别->页面级别
vnode与真实node
二者本质皆为一个对象
2.vnode的创建
vnode可通过调用vue里的h方法与createVNode方法进行创建。
例如
h('div',{style:{width:'100px'}},'第一个vnode')
createVNode('div',{style:{width:'100px'}},'第一个vnode')
h函数与createVNode函数基本一致。简单理解为h为createVNode上层封装详情查看掘金上其他的源码解析。其中第一个值可以是string,既常规的h5标签。也可以是对象,既一个组件。
3.组件级与页面级
个人定义组件级通长就是开发下写入componen文件夹下的.vue文件,特点是复用程度高。而页面级是定义在vue-router下的组件,在router/index.js文件夹下导入。
这俩其实没多大区别跟vnode一样也是一个对象。
其中setup props是我们熟悉的,而render是不熟悉的。以下是render内容
通过查看发现render实际是在执行createNVode。
所以个人将vnode作为原子,由vnode构成组件。