关于Vue的生命周期

概述

Vue实例是Vue框架的入口，对应于MVVM框架中的ViewModel。每个Vue实例中都包含了页面或组件的数据模型和业务逻辑等内容。

Vue实例在被创建之后会经历一系列的过程，即生命周期，其中包括开始创建、初始化数据、编译模版、挂载Dom、渲染、更新渲染、卸载等。一个生命周期中会包含多个事件钩子，供我们自定义逻辑，帮助我们在生命周期的各个阶段中控制Vue实例。

图解

官方文档中对生命周期的解释都体现在下面这张图中：

红色框中就是Vue提供的生命周期钩子函数，包括：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

对于生命周期的前几个阶段，可以通过在各个钩子函数中输出一些值来看看各阶段都发生了哪些变化。

父组件：

beforeCreate: function() {
  console.log('-------beforeCreate------')
  console.log("%c%s", "color:blue", "data      : " + this.$data);
  console.log("%c%s", "color:blue", "searchText: " + this.searchText);
},
created: async function() {
  this.getPublishedMission(1)
  console.log('-------created------')
  console.log("%c%s", "color:blue", "data      : " + this.$data);
  console.log("%c%s", "color:blue", "searchText: " + this.searchText);
},
beforeMount: function() {
  console.log('-------beforeMount------')
  console.log("%c%s", "color:blue", "data      : " + this.$data);
  console.log("%c%s", "color:blue", "searchText: " + this.searchText);
},
mounted: function() {
  console.log('-------mounted------')
  console.log("%c%s", "color:blue", "data      : " + this.$data);
  console.log("%c%s", "color:blue", "searchText: " + this.searchText);
},
beforeUpdate: function () {
  console.log('-------beforeUpdate------')
  console.log("%c%s", "color:blue", "data      : " + this.$data);
  console.log("%c%s", "color:blue", "searchText: " + this.searchText);
},
updated: function () {
  console.log('-------updated------')
  console.log("%c%s", "color:blue", "data      : " + this.$data);
  console.log("%c%s", "color:blue", "searchText: " + this.searchText);
}

子组件：

beforeCreate: function() {
  console.log('-------SON-beforeCreate------')
},
created: function() {
  console.log('-------SON-created------')
},
beforeMount: function() {
  console.log('-------SON-beforeMount------')
},
mounted: function() {
  console.log('-------SON-mounted------')
},
beforeUpdate: function () {
  console.log('-------SON-beforeUpdate------')
},
updated: function () {
  console.log('-------SON-updated------')
}

进入页面后的输出如下：

beforeCreate

实例在通过new Vue() 创建后，会对事件和生命周期进行初始化，此时所有的数据均未绑定，无法访问到数据和真实的dom。这个阶段可以进行loading操作。

从输出中可以看到data及其属性均为undefined。

created

这个阶段会观测数据，并将数据和data中的对应属性进行绑定，使得当data中的属性值发生改变时，数据相应地改变，视图也随之发生变化。

在created钩子中已经可以使用到数据，也可以更改数据，但在这里更改数据不会触发updated函数。因为这是在渲染前更改数据，不会触发其他钩子函数，所以可以在这里获取初始数据，比如从网络中请求数据。之后就要从实例或组件中找到对应的模版，将模版编译为虚拟的dom并准备渲染。

beforeMount

在这个阶段会检查vue配置，即new Vue{}里的el选项是否存在，如果有就继续检查template选项，否则等到手动调用vm.$mount()。

之后会检查template项，决定编译template还是outerHTML。

mounted

此时，组件已经出现在页面中，数据及真实dom都已经处理好了,事件都已经挂载好了。

在这里就可以对dom进行操作了。

beforeUpdate

当挂载后数据发生改变时就会触发beforeUpdate。此时dom还未重新渲染，可以在此函数中进一步更改状态。

当子组件挂载时，父组件会主动执行一次beforeUpdate，子组件挂载完毕后，父组件会继续执行updated。

当在父组件的输入框中输入内容后，也会相应地触发beforeUpdate和updated：

updated

此时数据的更新已经完成，dom也已经重新渲染。

在这个函数中不能操作数据，否则会陷入死循环。

beforeDestroy

实例在被销毁前出发，此时实例仍是可用的。可以作一些善后处理，比如清除计时器、清除非指令绑定的事件等。

destroyed

此时实例已被销毁，Vue指示的所有东西哦度灰解绑定，事件监听器也会被移除，并且子实例也会被销毁。

Vue实例化选项

Vue实例化时需要传入一个选项对象，其选项包括data, computed, template, methods, el, lifecyclehook等。

data中保存了Vue实例的数据，Vue会将data的各属性转换为getter和setter，使其能够响应数据的变化。

computed为计算属性，当其相关依赖发生改变时，会重新求值并返回结果。computed中的this上下文会绑定为Vue对象。

lifecyclehook就是之前提到的生命周期事件钩子。