My Little World

vue 源码学习一【new vue】

发表于

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
36
Vue.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属性
  }
};