1、目录解析
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)