vue组件渲染过程

前言

• 一个组件渲染到页面，修改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)
        })
    }
}

总结

• 渲染和响应式的关系
• 渲染和模板编译的关系
• 渲染和vdom的关系