Vue2 new Vue()内部运行机制

13824597405

来自官网的一张图,整体流程:

• new Vue() 时, init 初始化过程
• compile() 模板编译到 render 渲染函数
• 响应式系统
  

Vue.js的 init 过程,是比较复杂的. 经常书写下面的代码:

1. new Vue({
   
2.     el:"#app",
   
3.     data:{
   
4.         test:"这是一个测试"
   
5.     }
   
6.   })

复制代码

  

13824597405

接下来看看Vue的构造函数

   

1. /*Vue的构造函数,options是我们在new Vue({}) 传递进来的一个对象*/
   
2.     function Vue (options) {
   
3.         /*进行了Vue函数调用的安全监测*/
   
4.         /*Vue的构造函数只能通过new Vue()来调用*/
   
5.         /*不能通过 Vue()调用, 这样调用 this指向window*/
   
6.         if (!(this instanceof Vue)) {
   
7.             /*封装了warn函数,  用于报错提示信息等*/
   
8.             warn('Vue is a constructor and should be called with the `new` keyword');
   
9.         }
   
10.         /* 调用原型上的_init方法, 进行初始化  */
    
11.         this._init(options);
    
12.     }

复制代码

从上面的代码可以看出:

对Vue构造函数的进行限制, 只有通过 new Vue() 才可调用, 而直接调用 Vue(),里面的 this 会指向 window 会有报错提醒
调用了自身原型上的 _init 函数

13824597405

下面是Vue原型上的 _init 函数的代码

1. var uid$3 = 0; /* 用于统计Vue构造函数被new多少次*/
   
2. /*initMixin主要是对对options选项的合并和规范*/
   
3. function initMixin (Vue) {
   
4.     Vue.prototype._init = function (options) {
   
5.         var vm = this;
   
6.         /* 统计 Vue被new了多少次*/
   
7.         vm._uid = uid$3++;
   
8. 
   
9.         var startTag, endTag;
   
10.         /* istanbul ignore if */
    
11.         if (config.performance && mark) {
    
12.             startTag = "vue-perf-start:" + (vm._uid);
    
13.             endTag = "vue-perf-end:" + (vm._uid);
    
14.             mark(startTag);
    
15.         }
    
16. 
    
17. 
    
18.         /*设置了一个标识, 避免被vm实例加入响应式系统 */
    
19.         vm._isVue = true;
    
20.         /*合并选项*/
    
21.         if (options && options._isComponent) {
    
22.             // optimize internal component instantiation
    
23.             // since dynamic options merging is pretty slow, and none of the
    
24.             // internal component options needs special treatment.
    
25.             initInternalComponent(vm, options);
    
26.         } else {
    
27.             /*选项合并的入口代码*/
    
28.             vm.$options = mergeOptions(
    
29.                 resolveConstructorOptions(vm.constructor),
    
30.                 options || {},
    
31.                 vm
    
32.             );
    
33.         }
    
34.         /* istanbul ignore else */
    
35.         {
    
36.             initProxy(vm); /*初始化Proxy, 检测ES6的Proxy函数是否支持等*/
    
37.         }
    
38.         // expose real self
    
39.         vm._self = vm;
    
40.         initLifecycle(vm);  /* 初始时生命周期*/
    
41.         initEvents(vm); /* 初始化事件*/
    
42.         initRender(vm);  /* 渲染页面 */
    
43.         callHook(vm, 'beforeCreate');   /*生命周期钩子函数beforeCreate被的调用*/
    
44.         initInjections(vm); // resolve injections before data/props
    
45.         initState(vm);    /*初始化状态 props data computed watch methods*/
    
46.         initProvide(vm); // resolve provide after data/props
    
47.         callHook(vm, 'created');   /*生命周期钩子函数created被的调用*/
    
48. 
    
49.         /* istanbul ignore if */
    
50.         if (config.performance && mark) {
    
51.             vm._name = formatComponentName(vm, false);
    
52.             mark(endTag);
    
53.             measure(("vue " + (vm._name) + " init"), startTag, endTag);
    
54.         }
    
55.          /*如果配置了el选项, 去挂载*/
    
56.         if (vm.$options.el) {
    
57.             vm.$mount(vm.$options.el);
    
58.         }
    
59.     };
    
60. }

复制代码

13824597405

_init 函数的流程:

最重要的事情 mergeOptions() 函数, 进行选项的合并和规范化
初始化页面, 初始化事件, 渲染页面, 初始化 data、props、computed、watcher 等等