vue文件解析

    技术2022-07-16  79

    第一步:解析模板成render函数

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

    第二步:响应式开始监听

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

    第三步:首次渲染,显示页面,且绑定依赖

    初次渲染,执行updateComponent,执行vm._render()执行render函数,会访问到vm.list和vm.title会被响应式的get方法监听到执行updateComponent,会走到vdom的patch方法patch将vnode渲染成DOM,初次渲染完成

    第四步:data属性变化,触发rerender

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

    Question:

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

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

     

    Processed: 0.012, SQL: 10