Vue初始化流程
2020-12-14 15:09:45 0 举报AI智能生成
vue源码解析
作者其他创作
大纲/内容
new Vue()
文件位置：\src\core\instance\index.js
1. 定义了 Vue 的构造函数
2. Vue实例上API的初始化
实现 init 函数: initMixin()
状态相关的API ($data, $props, $set, $del, $watch): stateMixin()
事件相关的API($on, $once, $emit, $off): eventMixin()
生命周期API(_update, $forceUpdate, $ destroy): lifecycleMixin()
渲染函数(_render, $nextTick): renderMixin()
init 函数
文件位置：\src\core\instance\index.js
创建组件的实例，初始化数据、属性、事件等
initLifecycle(vm) ：初始化 $parent,$root,$children,$refs
initEvents(vm) ：处理父组件传递的事件和回调
initRender(vm) ：初始化 $slots,$scopedSlots,_c,$createElement
callHook(vm, 'beforeCreate')：生命周期beforeCreate钩子函数
initInjections(vm) ：获取注入数据
initState(vm) ：初始化 props，methods，data，computed，watch
initProvide(vm) ： 提供数据注入
callHook(vm, 'created')：生命周期created钩子函数
$mount() 挂载
文件位置：\src\platforms\web\entry-runtime-with-compiler.js
扩展默认$mount 方法：处理template或el选项， 生成render函数
调用 Vue 原型上的 $mount 方法
文件位置：\src\platforms\web\runtime\index.js
1. 安装web平台特有指令和组件
2. 定义__patch__：补丁函数，执行patching算法进行更新
3. 定义$mount：挂载vue实例到指定宿主元素（获得dom并替换宿主元素）
mountComponent()
文件位置：\src\core\instance\lifecycle.js
执行挂载，获取vdom并转换为dom
updateComponent()： 执行初始化或更新
new Watcher()：创建组件渲染watcher， 一个组件创建一个watcher
声明了生命周期 beforeMount、beforeUpdate、mounted 钩子函数
render() 渲染函数
文件位置：\src\core\instance\render.js
执行 render() 渲染组件，获取vdom
最后执行更新函数update()：初始化或更新，将传入vdom转换为dom，初始化时执行的是dom创建操作
0 条评论
下一页
