vue 组件渲染/更新过程

时间:2024-04-03 17:00:06

(一) 初次渲染过程

vue 组件渲染/更新过程

1. 解析模板为 render 函数

这部分是说vue 编译相关,也就是说把 vue 语法编译 成 js 语法,通过执行 vue-template-compiler 的 compiler 函数,得到 render 

2. 触发响应式

响应式关键 Object.defineProperty(),将模版初次渲染使用到的变量绑定到 Object.defineProperty() 中,首次渲染会 触发 getter 

vue 组件渲染/更新过程

3. 执行render 函数

第一点说到已经得到render函数,现在要执行render函数, 将 vue 语法转成 h 函数的结果,也就是 vNode,后续进行一系列操作

(二)渲染完成后 更新视图 (数据驱动视图)

vue 组件渲染/更新过程

(三)完整流程图

vue 组件渲染/更新过程

首先从黄色部分开始,执行render函数,生成虚拟DOM数,此时监听数据变动,一旦变动,触发 setter 函数,通知watcher,重新执行render 函数,循环往复