入口文件
入口文件路径:src/platform/web/entry-rutime-with-compiler.js
- $mount:
1、先获取el对象,如果el是字符串,调用documnt.querySelector(el)来获取el,如果el不是字符串,则认为el是一个dom对象,直接返回。
2、如果是开发环境,判断el是否为body或者html元素,如果是,给出警告
3、判断传入的参数中是否含有render方法,如果不存在,认为传入的是template模板,需要将template转为render
4、如果存在render,直接返回mount并传入vue实例和el等参数
四个导出vue的文件
-
src/platforms/web/entry-runtime-with-compiler.js
- web平台相关的入口
- 重写乐平台相关的
$mount()方法 - 注册了
Vue.compile()方法,传入了一个html字符串参数返回render函数
-
src/platforms/web/runtime/index.js
-
web平台相关
-
注册和平台相关的全局指令:
v-model、v-show -
注册和平台相关的全局组件:
v-transition、v-transition-group -
全局方法:
__patch__:把虚拟dom转化为真实dom$mount:挂载方法
-
-
src/core/index.js
- 与平台无关
- 设置了Vue的静态方法,initGlobalAPI(Vue)
-
src/core/instance/index.js
- 与平台无关
- 定义了Vue的构造函数,调用了
this._init(options)方法 - 给Vue中混入了常用的实例成员
初始化流程
一、先进入src/core/instance/index.js里面
1、调用initMixin(Vue),初始化vm实例
2、调用stateMixin(Vue),注册vm的$data/$props/$set/$delete/$watch属性
3、调用eventMixin(Vue),初始化事件相关的方法,$on/$once/$off/$emit
4、调用lifeCycleMixin(Vue),初始化一些生命周期_update/$forceUpdate/$destroy
5、调用renderMixin(Vue),混入render/$nextTick
以上都是挂载到Vue.prototype上面
二、然后进入src/core/index.js文件
1、执行initGlobalAPI(Vue),给Vue构造函数添加config属性,里面包含一些平台相关的属性
2、给Vue构造函数上面添加一些静态方法set/delete/nextTick
3、给Vue添加observable方法,可以让一个对象成为可响应对象
4、给Vue添加options属性,里面设置一些组件、指令、过滤器相关的成员
5、设置keep-alive组件
6、调用initUse(Vue),注册Vue.use()用来注册插件
7、调用initMixin(Vue),注册Vue.mixin()实现混入
8、调用initExtend(Vue),注册Vue.extend()基于传入的options返回一个组件的构造函数
9、调用initAssetRegister,注册Vue.component()可以注册组件/Vue.directive()可以注册指令/Vue.filter()可以注册过滤器
三、然后进入src/__platforms/web__/runtime/index.js文件
1、给Vue.options下面的components/directives里面添加一些属性,v-model和v-show就是这时候添加到指令里面的
2、给Vue原型上面挂载__patch__和$mount方法。__patch__用来将虚拟dom转化为真实dom
四、最后进入src/**platforms/web**/entry-runtime-with-compiler.js文件里面
1、重写Vue原型上的$mount方法,主要是在上面实现将template模板编译成render函数的方法
2、在Vue构造函数上面增加compile方法,可以让我们手动实现将template转化为render函数