Vue 原理理解 - 文章摘要学习

部分摘要 - 360图书馆号令风云
一图胜前言
根据自己的理解对原图进行了标注

Vue流程

vue流程

Vue运行流程：

模板通过编译生成AST
AST生成Vue的render函数（渲染函数）
渲染函数结合数据生成Virtual DOM树
Diff和Patch后生成新的UI

vue初始化阶段
1.Vue支持我们通过data参数传递一个JavaScript对象做为组件数据，
2.Vue将遍历此对象属性，使用Object.defineProperty方法设置描述对象，
3.通过存取器函数可以追踪该属性的变更，
4.Vue创建了一层Watcher层，在组件渲染的过程中把属性记录为依赖，

数据更新阶段
1.当依赖项的setter被调用时，
2.通知Watcher重新计算，
3.从而使它关联的组件通过render去渲染虚拟dom树
4.通过diff的核心算法patch,将新旧虚拟dom树，比对出差异部分，渲染到页面中去

针对编译器模板的差异

模板编译的当时，在Vue中，可以2种，Vue流程
1.独立构建：
包含模板编译器，渲染过程HTML字符串 → render函数 → VNode → 真实DOM节点
2.运行时构建：(只是省去了图1中，左侧的编译期)
不包含模板编译器，渲染过程render函数 → VNode → 真实DOM节点

模板书写方式
1.自定义render方式【上面编译方式2】

Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement (
            'h' + this.level,   // tag name标签名称
            this.$slots.default // 子组件中的阵列
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
})

2.template方式【上面编译方式1】

let app = new Vue({
    template: `&lt;div&gt;{{ msg }}&lt;/div&gt;`,
    data () {
        return {
            msg: ''
        }
    }
})

3.el方式【上面编译方式1】

let app = new Vue({
    el: '#app',
    data () {
        return {
            msg: 'Hello Vue!'
        }
    }
})

不论哪一种方式，最终都要得到render函数

渲染过程

render渲染简化流程

Vue渲染机制

组件响应式渲染

原理再图解

new Vue，执行初始化
挂载$mount方法，通过自定义render方法、template、el等生成render函数
通过Watcher监听数据的变化
当数据发生变化时，render函数执行生成VNode对象
通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素

最后编辑于：2021.07.05 15:03:51