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

上一篇:通过框架设计理解React、Angular、Vue区别


下一篇:react-fiber 解析