vue5

虚拟DOM（vdom）

vue利用VDOM的对象模型的模拟DOM结构

页面复杂 ,DOM结构的模拟就变得复杂因此

Vue使用了新的语法糖 ，叫做jsx(javascript+xml)也就是

虚拟DOM

render方法

将jsx通过render方法解析为对象模型

流程

第一次

template模板使用jsx语法进行编辑

通过render函数将jsx解析为vdom对象模型

将VDOM对象模型渲染为真实的DOM ,然后挂载到页面中

当数据改变时

重新生成VDOM

diff算法

真实DOM 对比 重新渲染的VDOM ,同级对比，

数据不一样的改变，一样的不变

操作数据 VDOM 比操作真实DOM速度快性能好

生命周期：

生命周期

​ 在一个组件的从

创建到销毁的

一系列过程添

​ 功能

控制组件

三个阶段 8个钩子函数 钩子函数 不写成箭头函数

箭头函数改变this指向

初始化

​ beforeCreate

createdbefore

Mountmounted

mounted

运行中

beforeUpdate

updated

销毁

beforeDestroy

destroyed

标签：函数,render,DOM,模型,vue5,jsx,VDOM
来源： https://blog.csdn.net/weixin_45478895/article/details/100086792