【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中去

你可能感兴趣的:(JavaScript学习,Javascript高级,javascript,玩转前端JavaScript)