vue3虚拟dom个人简单理解记录

103 阅读1分钟

1.虚拟dom

虚拟dom既与真实dom所对应。简单理解为vue里节点里的原子。个人理解将其分成三类

vnode-> 组件级别->页面级别

vnode与真实node

image.png

image.png

二者本质皆为一个对象

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一样也是一个对象。

image.png

其中setup props是我们熟悉的,而render是不熟悉的。以下是render内容

image.png 通过查看发现render实际是在执行createNVode。

所以个人将vnode作为原子,由vnode构成组件。