vue组件渲染过程

news2025/1/10 17:14:52

前言

一个组件渲染到页面，修改data触发更新（数据驱动视图）
其背后原理是什么，需要掌握哪些点
考察对流程了解的全面程度

回顾三大核心知识点

响应式：监听data属性getter、setter（包括数组）
模板编译：模板到render函数，再到vnode
vdom：两种用法
- patch(elem,vnode) 首次渲染vnode到container上
- patch(vnode、newVnode) 新的vnode去更新旧的vnode
搞定这三点核心原理，vue原理不是问题

组件渲染更新过程

1. 初次渲染过程
- 解析模板为render函数（或在开发环境已经完成vue-loader模板编译）
- 触发响应式，监听data属性getter、setter
- 执行render函数（执行render函数过程中，会获取data的属性触发getter），生成vnode，在执行patch(elem,vnode) elem组件对应的dom节点
  - const template = <p>{message}</p>
  - 编译为render函数 with(this){return _c('p', [_v(_s(message))])}
  - this就是vm的实例, message等变量会从vm上读取，触发getter进行依赖收集
```
export default {
    data() {
        return {
            message: 'hello' // render函数执行过程中会获取message变量值，触发getter
        }
    }
}
```
2. 更新过程
- 修改data，触发setter（此前在getter中已被监听）
- 重新执行render函数，生成newVnode
- 在调用patch(oldVnode, newVnode)算出最小差异，进行更新
3. 完成流程图

异步渲染

汇总data的修改，一次更新视图
减少DOM操作次数，提高性能

methods: {
    addItem() {
        this.list.push(`${Date.now()}`)
        this.list.push(`${Date.now()}`)
        this.list.push(`${Date.now()}`)

        // 1.页面渲染是异步的，$nextTick待渲染完在回调
        // 2.页面渲染时会将data的修改做整合，多次data修改也只会渲染一次
        this.$nextTick(()=>{
            const ulElem = this.$refs.ul
            console.log(ulElem.childNotes.length)
        })
    }
}