

首页  思维导图  详情



Vue初始化流程

2020-12-14 15:09:45   0  举报





AI智能生成

vue源码解析

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) ：处理父组件传递的事件和回调 <br>

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创建操作

 Collect

Get Started

vue初始化

 Collect

Get Started

分区初始化

 Collect

Get Started

ShopExtend初始化

 Collect

Get Started

初始化





0 条评论

下一页