Vue源码目录入口分析

623 阅读1分钟

1、目录解析

image-20210824222044215.png

2、输出dist文件后的专业术语

runtime:仅包含运行时,不包含编译器(不能使用template)

common:cjs规范,webpack1老旧版本打包

esm:ES模块,用于webpack2+打包

umd:universal module defintion,兼容esm和amd,用于浏览器

3、源码文件目录分析

/Users/wangyalong/Desktop/vue-2.6.11/src/platforms/web/entry-runtime-with-compiler.js

入口文件:覆盖$mount,处理template或el选项

/Users/wangyalong/Desktop/vue-2.6.11/src/platforms/web/runtime/index.js

定义$mount

/Users/wangyalong/Desktop/vue-2.6.11/src/core/index.js

定义全局API

/Users/wangyalong/Desktop/vue-2.6.11/src/core/instance/index.js

定义构造函数的地方

/Users/wangyalong/Desktop/vue-2.6.11/src/core/instance/init.js

初始化方法_init定义方法

initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

initData,获取data,设置代理,启动响应式observe

/Users/wangyalong/Desktop/vue-2.6.11/src/core/instance/state.js

5、响应式

_render获取虚拟DOM _update()把虚拟DOM转换成真实DOM

调用init 初始化各种属性 调用mountComponent 声明updateComponent,创建Watcher

new Vue() => this._init(options) => $mount() =>mountComponent() => _render() => _update()

4、初始化过程

问题:template和render共存时,render起作用(render》template〉el)