【Vue高级知识】梳理Vue源码的整个实现流程

Vue的整个实现流程源码解读？？？（总结点）

解析模板成render函数

    <template>template> --->>> render 函数

with函数的使用
模板中的所有信息都被render函数包含
模板中用到的data中的属性，都变成了JS变量
模板中的v-model v-for v-on都变成了JS逻辑
render函数返回vnode

响应式开始监听数据

Object.defineProperty
将data的属性代理到vm上

    with(vm) {
        
    }

首次渲染，显示页面，且绑定依赖

初次渲染，执行updateComponent, 执行vm._render()
执行render函数，会访问到vm.list和vm.title属性
会被响应式的get方法监听到(Object.defineProperty)

    Object.defineProperty(mv, key, {
        get: function() {
          return data[key];
        }
    })

执行updateComponent, 会执行vdom的patch方法
patch将vnode渲染成DOM，初次渲染完成

• 为何要监听get, 直接监听set不行吗？

data中有很多属性，有些会被用到，有些可能不被用到
被用到的会走到get, 不被用到的不会走到get
未走到get中的属性，set的时候我们也无需关心
避免不必要的重复渲染（关键点）

    vm._update(vnode) {
        const prevNode = vm._vnode;
        vm._vnode = vnode;
        if (!prevNode) {
            // 首次渲染的时候
            vm.$el = vm.__patch__(vm.$el, vnode);
        }
        else{
            vm.$el = vm.__patch__(prevNode, vnode);
        }
    }
    
    // 开始更新vue组件（修改data的属性的时候，Object.defineProperty）
    function updateComponent() {
      vm._update(vm._render());
    }

data属性变化，触发rerender函数

    Object.defineProperty(mv, key, {
        set: function(newVal) {
          data[key] = newVal;
          // 开始执行
          updateComponnet()
        }
    })

修改属性，被响应式的set监听到
set中执行updateComponnet
updateComponent重新执行vm._render()
生成的vnode和preVnode, 通过patch进行对比
渲染到html中去