生命周期图

这是对于 Vue 生命周期，官网给的那张图的标注图，图片网上看到的，我觉得标注地很 nice，建议一步步仔细看完图片，然后把图片自己悄悄保存下来，对照着图片的内容看第二部分的举例说明。

啥叫 Vue 生命周期？

每个 Vue 实例在被创建时都要经过一系列的初始化过程。
例如：从开始创建、初始化数据、编译模板、挂载 Dom、数据变化时更新 DOM、卸载等一系列过程。
我们称 这一系列的过程 就是 Vue 的生命周期。
通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。

生命周期分解

对照着上图标注的内容，我们一个钩子一个钩子地举例说明。

beforeCreate

实例初始化之后、创建实例之前的执行的钩子事件。
如下例子：

<body>
  <div id="root">{{test}}</div>
  <script type="text/javascript">
    const vm = new Vue({
      el: '#root',
      data: {
        test: '天王盖地虎',
      },
      beforeCreate() {
        console.log('beforeCreate钩子事件：')
        console.log(this.$data)
        console.log(this.$el)
      },
    })
  </script>
</body>

得到的结果是：

小总结：创建实例之前，数据观察和事件配置都没好准备好。也就是数据也没有、DOM 也没生成。

created

实例创建完成后执行的钩子
在上一段代码例子中，我们再来 console 一下。

<body>
  <div id="root">{{test}}</div>
  <script type="text/javascript">
    const vm = new Vue({
      el: '#root',
      data: {
        test: '天王盖地虎',
      },
      created() {
        console.log('created钩子事件：')
        console.log(this.$data)
        console.log(this.$el)
      },
    })
  </script>
</body>

得到的结果是：

小总结：实例创建完成后，我们能读取到数据 data 的值，但是 DOM 还没生成，挂载属性 el 还不存在。

beforeMount

将编译完成的 html 挂载到对应的虚拟 DOM时触发的钩子
此时页面并没有内容。
即此阶段解读为: 即将挂载
我们打印下此时的\$el

beforeMount() {
	console.log('beforeMount钩子事件：');
	console.log(this.$el);
}

得到的结果是：

小总结：此时的 el 不再是 undefined,成功关联到我们指定的 dom 节点。但是此时的还没有成功渲染成 data 中的数据，页面没有内容。

PS：相关的 render 函数首次被调用。

mounted

编译好的 html 挂载到页面完成后所执行的事件钩子函数。
此时的阶段解读为：挂载完毕阶段
我们再打印下此时\$el 看看：

mounted() {
	console.log('mounted钩子事件：');
	console.log(this.$el);
}

得到的结果是：

可见，已经成功渲染成 data 里面 test 对应的值“天王盖地虎”了。

小总结：此时编译好的 HTML 已经挂载到了页面上，页面上已经渲染出了数据。一般会利用这个钩子函数做一些 ajax 请求获取数据进行数据初始化。

PS：mounted 在整个实例中只执行一次。

beforeUpdate

小总结：当修改 vue 实例的 data 时，vue 就会自动帮我们更新渲染视图，在这个过程中，vue 提供了 beforeUpdate 的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子 beforeUpdate。

updated

小总结：此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容。

PS:
1. 该钩子在服务器端渲染期间不被调用。
2. 应该避免在此期间更改状态，因为这可能会导致更新无限循环。

beforeDestroy

小总结：调用实例的 destroy( )方法可以销毁当前的组件，在销毁前，会触发 beforeDestroy 钩子。

destroyed

小总结：成功销毁之后，会触发 destroyed 钩子，此时该实例与其他实例的关联已经被清除，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

其实还有三个生命周期钩子没列出来：activated、deactivated、errorCaptured。

Mr. Leo

Vue生命周期

啥叫 Vue 生命周期？

生命周期分解

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed