【九月打卡】第四天 + 前端框架及项目面试

课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

课程章节：Vue3.0

主讲老师：双越老师

课程内容：

今天学习内容包括：

1. vue组件如何渲染和更新

课程收获：

初次渲染：

• 解析模板为 render 函数（或在开发环境已完成，vue-loader）

• 触发响应式，监听 data 属性 getter setter

• 执行 render 函数，生成 vnode，patch(elem, vnode

执行render函数会触发getter：

• 模板中使用到的会触发 get

• 模板中没有使用到的不会触发 get，因为和视图没有关系

更新过程：

• 修改 data，触发 setter（此前在 getter 中已被监听）

• 重新执行 render 函数，生成 newVnode

• patch(vnode, newVnode

Vue组件如何异步渲染

• $nextTick 是异步的

• 汇总 data 的修改，一次性更新视图

• 减少 DOM 操作次数，提高性能

课程学习截图：