new Vue 的整体流程
2022-05-07 16:30:01 1 举报登录查看完整内容
介绍了 new Vue 大致发生了什么
作者其他创作
大纲/内容
保存渲染函数
调用 __patch__ 方法
使用高阶函数 createPatchFunction 创建在 web 平台上的 patch 函数
整体流程梳理
根据 ast 语法树，生成组件渲染函数 render 代码
从 $options 中获取 render，_parentVnode
其中调用 createElement 函数
调用生命周期回调 mounted
创建 Watch 对象
此处应该注意，这里的渲染函数不是 renderHelper，而是自定义内容对应的渲染代码
使用组件初始化，为节点添加一些组件节点专有的属性
是
首先调用 _render 获得组件节点的虚拟DOM树
vm 是否是组件节点
如果 该 watcher 是渲染 Render， 则设置 vm._render
检查之前是否已经渲染过虚拟DOM树，如果有与虚拟DOM树做比较，如果没有与真实DOM节点作比较
调用 _update 函数，进行DOM树的更新
生成组件的 updateComponent 函数
因为未设置 lazy 属性，所以在 new Watcher 时就会更新一遍
initInjections 初始化注入信息（Vue inject 特性）
调用 原$mount函数，位置 platform/web/runtime/index.js
initLifeCycle 初始化生命周期的设置
使用 mergeOptions 进行属性，数据，方法的继承
将解析得到的作用域插槽渲染函数正则化为一维数组
先解析模板，得到 ast 语法树
调用 render 渲染函数
initState 初始化组件实例的数据，方法和状态
调用 mountComponent
调用生命周期回调 beforeCreate
在 initRender 中有一个解析 resolveSlots 函数，用于解析组件的无作用域插槽，只有在vm 是组件节点的时候才会被实际调用其中用到的属性便是在第二部属性设置时，为组件进行专门的配置时设置的
设置当前渲染数据上下文为该节点的 vm 实例
patch 方法的产生代码位置 platforms/web/runtime/index.js
initProvide 初始化组件的 provide 环境 （Vue provide 特性）
initEvents 初始化事件的设置
initRender 初始化渲染设置
其中 render 为在调用 $mount 时生成的渲染函数，将此函数保存在 $options 中，还有 staticRenderFns 也在 $options 中_parentVnode 为该节点在 虚拟DOM 上的占位节点
调用生命周期回调 beforeMount
调用
调用生命周期回调 created
该函数会利用传入的 modules （里面是DOM中各种属性如何修改的回调函数） nodeOps 是对应平台如何操作DOM的封装API
将 updateComponent 作为 watcher 的 getter
否
调用 new Vue
调用 $mount 将节点渲染到DOM上
收藏
0 条评论
回复 删除
下一页
