new vue时发生了什么
平常练习时使用vue顺序是，将vue.js引入html,
new vue就可以开始使用vue框架写东西1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<body>
<div id = 'app'>
<p>{{a}}</p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
a:'hello world'
},
method:{},
})
</script>
</body>
代码运行顺序是，当我们在script标签引入文件时，
引入的vuejs文件会先执行一遍，
执行的结果就是帮助我们生成一个挂载在全局的，vue对象的构造函数1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Vue = factory());//将vue挂到全局上下文中
}(this, function () { 'use strict';
function Vue (options) {
if (!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
initMixin(Vue);
stateMixin(Vue);
eventsMixin(Vue);
lifecycleMixin(Vue);
renderMixin(Vue);
initGlobalAPI(Vue);
Vue.compile = compileToFunctions;
return Vue;
}));
当代码运行到new vue时，代码就会调用function Vue
function Vue 中会【调用】自己的_init()方法，
对即将生成的vue对象做初始化工作，即开始生成vue对象
_init方法定义在initMixin函数中
在调用initMixin生成构造函数流程中被挂到vue上1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36Vue.prototype._init = function (options) {
var vm = this;
vm._uid = uid$3++;
var startTag, endTag;
vm._isVue = true;// a flag to avoid this being observed
// 合并选项,将配置项以内置选项进行合并
if (options && options._isComponent) {
//优化内部组件实例化过程
// 由于动态选项合并非常慢，并且内部组件选项均不需要特殊处理。
initInternalComponent(vm, options);
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
}
/* istanbul ignore else */
{
initProxy(vm);
}
// expose real self
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');//运行订阅了beforecreate钩子的相关方法
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
if (vm.$options.el) {//如果配置了el,就进行挂载处理挂载
vm.$mount(vm.$options.el);//会给给option挂上render，staticRenderFns属性
}
};
