05、Vue的生命周期

首先，我们看一下生命周期图例：

生命周期.png

Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段，每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。学习实例的生命周期，能帮助我们理解vue实例的运行机制，更好地合理利用各个钩子来完成我们的业务代码。
我们分别来看看这几个阶段：

1、beforeCreate

---

此阶段为实例初始化之后，此时的数据观察和事件配置都没有准备好。
我们试着console一下实例的数据data和挂载元素el，代码如下：

{{ name }}

得到的结果：

效果图.png

此时，实例中的data和el还是不可用的。

2、created

---

beforeCreated之后紧接着的钩子就是创建完毕的created，我们可以同样打印一下数据data和挂载元素el，看看结果会是什么？

效果图.png

此时我们能读取到数据data的值，但是DOM还没有生成，所以属性el还不存在，输出$data为一个Object对象，而$el的值为undefined。

3、beforeMount

---

上一个阶段我们都知道DOM还没有生成，属性el还未undefined，那么，此阶段未即将挂载，我们打印一下此时的$el是什么？

增加一下代码：

beforeMount(){
  console.log('即将挂载')
  console.log(this.$data)
  console.log(this.$el)
}

打印结果如下：

效果图.png

此时的$el不再是undefined，而是成功关联到我们指定的dom节点

，但此时{{ name }}还没有被成功地渲染成我们data中的数据。没事，我们接着往下看。

4、mounted

---

mounted也就是挂载完毕阶段，到了这个阶段，数据就会被成功渲染出来，我们编写mounted的钩子，打印$el 看看：

mounted(){
  console.log('挂载完毕')
  console.log(this.$data)
  console.log(this.$el)
}

结果如下：

效果图.png

如我们所愿，此时打印属性el，我们看到{{ name }}已经成功渲染成我们data.name的值：“前端学习”。

5、beforeUpdate

---

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

html片段代码我们加上ref属性，用于获取DOM元素。

  {{ name }}

Vue实例代码加上beforeUpdate钩子代码：

beforeUpdate () {
  console.log('=即将更新渲染=')
  let name = this.$refs.app.innerHTML
  console.log('name:' + name)
}

我们试一下，在控制台修改一下实例的数据name，在更新渲染之前，我们打印视图中文本innerHTML的内容会是多少：

效果图.gif

我们在控制台把app.name的值从原来的“前端君”修改为“web前端教程”，在更新视图之前beforeUpdate打印视图上的值，结果依然为原来的值：前端君，表明在此阶段，视图并未重新渲染更新。

6、updated

---

此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容，接着上面的案例，我们添加钩子updated的代码，如下：

updated () {
  console.log('==更新成功==')
  let name = this.$refs.app.innerHTML
  console.log('name:' + name)
}

结果如下：

效果图.gif

大家注意两个不同阶段打印的name的值是不一样的，updated阶段打印出来的name已经是最新的值：web前端教程，说明此刻视图已经更新了。

7、beforeDestory

---

调用实例的destory()方法可以销毁当前的组件，在销毁前，会触发beforeDestory钩子。

8、destoryed

---

成功销毁之后，会触发destoryed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。

9、actived

---

keep-active组件被激活的时候调用。

10、deactivated

---

keep-alive组件停用时调用。