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

生命周期就是數(shù)據(jù)流在某個(gè)時(shí)間點(diǎn)通過callHook調(diào)用vm.$options對(duì)應(yīng)的LIFECYCLE_HOOKS函數(shù)方法

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

image.png

利用這張圖來對(duì)應(yīng)源碼并淋，查看和周期的過程给梅，會(huì)比較有邏輯性些

一假丧、beforeCreate 和 created

new Vue()也就是是執(zhí)行源碼中的_init函數(shù)

可以查看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屬性包帚，則會(huì)執(zhí)行源碼中的上面代碼

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

2.如果沒有el屬性,則直接執(zhí)行vm.$mount函數(shù)進(jìn)行掛載

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

上面的有el屬性和無el屬性最終都會(huì)執(zhí)行vm.$mount函數(shù)

// 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.調(diào)用beforeMount之間运吓，vm.$options.render函數(shù)首次被調(diào)用

2.vm.$el= el el賦值給vm.$el并掛載到實(shí)例上渴邦，mounted之后我們會(huì)看到實(shí)例中存在一個(gè)

vm.$el= el

問題：vm.$options.render函數(shù)調(diào)用作用？拘哨？谋梭？

實(shí)例化Vue時(shí),可以直接用render函數(shù)轉(zhuǎn)讓化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時(shí)倦青，就實(shí)例化了瓮床，因?yàn)槌跏蓟痙om結(jié)構(gòu)時(shí)會(huì)調(diào)用$forceUpdate

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

而調(diào)用$forceUpdate時(shí)會(huì)用到vm._watcher

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

上面代碼可以看到實(shí)例化Watcher時(shí) vm._watcher = this; this指的是當(dāng)前的Watcher的函數(shù)，也就是說Watcher.prototype值产镐，vm._watcher也同樣繼承到了隘庄，可以訪問

vm._watcher.update() 實(shí)際上訪問的也就是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.實(shí)例銷毀之間調(diào)用beforeDestroy, beforeDestroy調(diào)用時(shí)癣亚，實(shí)例還是能繼續(xù)使用

2.調(diào)用destroyed后丑掺，說明實(shí)例已經(jīng)銷毀。那么實(shí)例指向的所有事件逃糟，子實(shí)例都會(huì)解綁吼鱼，也就不能再使用了

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函數(shù)中我們看到條件vnode.data.keepAlive

keep-alive激活時(shí)使用

  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不激活時(shí)使用绰咽，也就是當(dāng)前有兩個(gè)路由A,B并且顯示內(nèi)容在keep-alive中

1.A,B顯示的內(nèi)容會(huì)被keep-alive緩存

2.當(dāng)前A,如果點(diǎn)擊路由顯示B,則A會(huì)走destroy函數(shù)菇肃，會(huì)觸發(fā)deactivated

<template>
  <div id="app1">
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
    <router-link to="/A">Go to Foo</router-link>
    <router-link to="/B">Go to Bar</router-link>
</template>

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');
  }
}