vue 生命周期LIFECYCLE源码

var LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured',
  'serverPrefetch'
];

生命周期就是数据流在某个时间点通过callHook调用vm.$options对应的LIFECYCLE_HOOKS函数方法

function callHook (vm, hook) {
  // #7573 disable dep collection when invoking lifecycle hooks
 ......
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook);
  }
 ......
}

image.png

利用这张图来对应源码，查看和周期的过程，会比较有逻辑性些

一、beforeCreate 和 created

new Vue()也就是是执行源码中的_init函数

可以查看beforeCreate前的工作，created前的工作

function initMixin (Vue) {
  Vue.prototype._init = function (options) {
    ......
    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');
    ......
  }
}

二、接下来查看下一步 Has 'el' options?

function initMixin (Vue) {
  Vue.prototype._init = function (options) {
    ......
    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  }
}

1.如果有el属性，则会执行源码中的上面代码

// options中有'el'属性
new Vue({
  el:'#app',
  render: h => h(App)
})

2.如果没有el属性,则直接执行vm.$mount函数进行挂载

new Vue({
  render: h => h(App)
}).$mount("#app")

上面的有el属性和无el属性最终都会执行vm.$mount函数

// public mount method
Vue.prototype.$mount = function (
  el,
  hydrating
) {
  el = el && inBrowser ? query(el) : undefined;
  return mountComponent(this, el, hydrating)
};

三、beforeMount 和 mounted

function mountComponent (
  vm,
  el,
  hydrating
) {
  vm.$el = el;
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode;
  }
  ......
  callHook(vm, 'beforeMount');
  ......
  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true;
    callHook(vm, 'mounted');
  }
  return vm
}

1.调用beforeMount之间，vm.$options.render函数首次被调用

2.vm.$el= el el赋值给vm.$el并挂载到实例上，mounted之后我们会看到实例中存在一个

vm.$el= el

问题：vm.$options.render函数调用作用？？？

实例化Vue时,可以直接用render函数转让化component并挂载

四、beforeUpdate 和 updated

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before: function before () {
      if (vm._isMounted && !vm._isDestroyed) {

        callHook(vm, 'beforeUpdate');
      }
    }
  }, true /* isRenderWatcher */);

Watcher在mounted时，就实例化了，因为初始化dom结构时会调用$forceUpdate

  Vue.prototype.$forceUpdate = function () {
    var vm = this;
    if (vm._watcher) {
      vm._watcher.update();
    }
  };

而调用$forceUpdate时会用到vm._watcher

var Watcher = function Watcher (
  vm,
  expOrFn,
  cb,
  options,
  isRenderWatcher
) {
  this.vm = vm;
  if (isRenderWatcher) {
    vm._watcher = this;
  }
...
}

上面代码可以看到实例化Watcher时 vm._watcher = this; this指的是当前的Watcher的函数，也就是说Watcher.prototype值，vm._watcher也同样继承到了，可以访问

vm._watcher.update() 实际上访问的也就是Watcher.prototype.update

Watcher.prototype.update = function update () {
  /* istanbul ignore else */
  if (this.lazy) {
    this.dirty = true;
  } else if (this.sync) {
    this.run();
  } else {
    queueWatcher(this);
  }
};

queueWatcher -> flushSchedulerQueue -> callUpdatedHooks
可以看到callHook(vm, 'updated');

function callUpdatedHooks (queue) {
  var i = queue.length;
  while (i--) {
    var watcher = queue[i];
    var vm = watcher.vm;
    if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
      callHook(vm, 'updated');
    }
  }
}

五、beforeDestroy 和 destroyed

1.实例销毁之间调用beforeDestroy, beforeDestroy调用时，实例还是能继续使用

2.调用destroyed后，说明实例已经销毁。那么实例指向的所有事件，子实例都会解绑，也就不能再使用了

Vue.prototype.$destroy = function () {
    var vm = this;
    if (vm._isBeingDestroyed) {
      return
    }
    callHook(vm, 'beforeDestroy');
    vm._isBeingDestroyed = true;
    .....
    callHook(vm, 'destroyed');
  };

六、activated 和 deactivated

insert -> activateChildComponent -> callHook(vm, 'activated');
在insert函数中我们看到条件vnode.data.keepAlive

keep-alive激活时使用

  insert: function insert (vnode) {
   ......
    if (vnode.data.keepAlive) {
      if (context._isMounted) {
        // vue-router#1212
        // During updates, a kept-alive component's child components may
        // change, so directly walking the tree here may call activated hooks
        // on incorrect children. Instead we push them into a queue which will
        // be processed after the whole patch process ended.
        queueActivatedComponent(componentInstance);
      } else {
        activateChildComponent(componentInstance, true /* direct */);
      }
    }
  },

function activateChildComponent (vm, direct) {
  ......
  if (vm._inactive || vm._inactive === null) {
    ......
    callHook(vm, 'activated');
  }
}

keep-alive不激活时使用，也就是当前有两个路由A,B并且显示内容在keep-alive中

1.A,B显示的内容会被keep-alive缓存

2.当前A,如果点击路由显示B,则A会走destroy函数，会触发deactivated

destroy -> deactivateChildComponent -> callHook(vm, 'deactivated');

destroy: function destroy (vnode) {
    var componentInstance = vnode.componentInstance;
    if (!componentInstance._isDestroyed) {
      if (!vnode.data.keepAlive) {
        componentInstance.$destroy();
      } else {
        deactivateChildComponent(componentInstance, true /* direct */);
      }
    }
  }

function deactivateChildComponent (vm, direct) {
  if (direct) {
    vm._directInactive = true;
    if (isInInactiveTree(vm)) {
      return
    }
  }
  if (!vm._inactive) {
    vm._inactive = true;
    for (var i = 0; i < vm.$children.length; i++) {
      deactivateChildComponent(vm.$children[i]);
    }
    callHook(vm, 'deactivated');
  }
}