美文网首页vue源码分析
new Vue执行的数据流

new Vue执行的数据流

作者: Wendy81 | 来源:发表于2020-10-29 11:55 被阅读0次

一、new Vue也就是创建函数Vue的实例

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}

现在是process.env.NODE_ENV = 'development', 则直接执行this._init(options);
二、找到_init函数

function initMixin (Vue) {
  Vue.prototype._init = function (options) {
    var vm = this;
    // a uid
    vm._uid = uid$3++;

    var startTag, endTag;
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = "vue-perf-start:" + (vm._uid);
      endTag = "vue-perf-end:" + (vm._uid);
      mark(startTag);
    }

    // a flag to avoid this being observed
    vm._isVue = true;
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options);
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      );
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm);
    } else {
      vm._renderProxy = vm;
    }
    // expose real self
    vm._self = vm;
    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');

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false);
      mark(endTag);
      measure(("vue " + (vm._name) + " init"), startTag, endTag);
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  };
}

//这里已经运行,说明_init已经写入Vue的prototype的属性里
initMixin(Vue);

_init已经写入Vue的prototype的属性里,也就是_init已经存在于Vue的原型链中,所有Vue的实例对象都可以访问这个函数

this._init(options)执行的就是这个原型链中的函数_init

 // expose real self
    vm._self = vm;
    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');

这里我们可以看到初始化时都做了哪些工作initLifecycle,initEvents,initRender,initInjections,initState,initProvide,callHook

相关文章

  • new Vue执行的数据流

    一、new Vue也就是创建函数Vue的实例 现在是process.env.NODE_ENV = 'develo...

  • new Vue()发生了什么

    new Vue()是创建Vue实例,而Vue是一个类,当执行 new Vue()的时候,它的内部主要是执行了一个_...

  • Vue(一)

    new Vue 1. 当我们 new Vue 的时候,会执行 _init 方法。 2. _init 方法再...

  • Vue 3.0 的生命周期

    1.new Vue() new一个vue实例化对象 2.init Event & Lifecycle 执行一些初始...

  • new vue() 发生了什么

    在定义vue 方法之后,会调用一系列vue 方法的封装工作 执行new vue 后,会执行this._init 方...

  • Vue 3.0 的生命周期 (概括)

    new Vue()new一个vue实例化对象 init Event & Lifecycle执行一些初始化和生命周期...

  • Vue之生命周期

    new Vue() 创建一个Vue实例 beforeCreate 当执行到beforeCreate函数的时候,da...

  • 阅读vue源码笔记(三)new Vue 里的data

    调试代码: 源码: 根据这个Vue function可知:当new Vue时,将会执行 this._init(o...

  • vue cumputed原理

    new Vue的时候:执行 initComputed (vm, computed) 所以本质上computed是一...

  • vue相关原理图解

    MVVM 生命周期 vue初始化及更新 new Vue()首先执行初始化,对data执行响应化处理,这个过程发生O...

网友评论

    本文标题:new Vue执行的数据流

    本文链接:https://www.haomeiwen.com/subject/bhucvktx.html