前言

《vue 基础》系列是再次回炉 vue 记的笔记，除了官网那部分知识点外，还会加入自己的一些理解。（里面会有部分和官网相同的文案，有经验的同学择感兴趣的阅读）

平时开发中，我真的不太使用生命周期相关的方法。但必须明确的是，生命周期在整个 vue 具有非常重要的作用，如果你了解它将对理解整个 vue 会更容易；同时在遇到问题时也能有个导向性的判断。

此篇简单说下生命周期的过程，以及方法调用。

生命周期的整个过程

借用 vue 官网的图，仔细全览下基本就对生命周期的过程有个粗略的认识了。

我这里没必要重复细说了，按我自己理解讲这个过程：

new 一个 Vue 实例
初始化 event（$on、$off 等）和 lifecycle
触发钩子 beforeCreate
初始化 inject、data、computed、watch、provide
触发钩子 created
判断 el 属性（是否调用 $mount，你在源码能看到两个 $mount 的声明），判断 template 属性（决定渲染模板）
触发钩子 beforeMount
替换 el 标签内容，实现元素挂载
触发钩子 mounted
definedReactive 响应式的定义在初始化的时候已经完毕了，当数据更新，触发钩子 beforeUpdate 、 updated
销毁时，触发钩子 beforeDestroy
移除事件监听、绑定数据
销毁完， 触发钩子 destroyd

钩子触发顺序

这个例子，调用了所有生命周期的钩子，用来说明他们的执行顺序（注意 activated 和 deactivated 是 keepalive 专用的）：

<template>
  <div style="backgound:#fff;text-align:center;">
    <mt-header title="举例" :fixed="false"></mt-header>
    <mt-button type="default" @click="currentComponent = currentComponent == 'vv-button' ? 'vv-button2' : 'vv-button'">test keepalive</mt-button>
    <mt-button type="danger" @click="$destroy()">destroy</mt-button>
    <div style="margin-top:10px;">
      <keep-alive>
        <component v-bind:is="currentComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

直接看下图，当 created 时，开启一个 timer 定时器用来确认组件的销毁情况。

created() {
  console.log('component [Test] ', 'created');
  this.timer = setInterval(() => {
    console.log('component [Test] working ...');
  }, 1000)
}