Vue组件生命周期函数

在遇到了a-form/a-form-model重置表单使用resetFields()函数重置无效问题并解决之后，我对其生命周期函数进行了巩固学习，下面是一些分析和总结。

beforeCreate

• 描述：初始化实例之后，可以理解为new Vue()之后
• 注意：此时，Vue对象中的数据侦听和事件/侦听器的配置还未进行设置，所以使用computed、methods、watch、data等等相关配置会有报错提示。

created

• 描述：实例创建之后，这时候Vue的computed、methods、watch、data相关配置则可以通过this对象进行使用了。

beforeMount

• 描述：在挂载开始之前，可以理解为Vue中的html结构<template>渲染到页面之前，render 函数首次被调用
• 注意：在此函数里进行元素获取和$el的使用都是获取不到DOM结构的，此时Vue的el属性只是一个div容器。而且在服务器端渲染期间该函数不被调用执行。

mounted

• 描述：实例被挂载后调用，可以理解为<template>渲染到页面之后,这时 el 被新创建的 vm.$el 替换了。此时就可以使用document.querySelector或者vm.$el 获取DOM结构了
• 注意：在服务器端渲染期间不被调用，并且mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
 this.$nextTick(function () {
  // 仅在整个视图都被渲染之后才会运行的代码
 })
}

beforeUpdate

• 描述：在数据发生改变后，DOM被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器

updated

• 描述：当这个钩子被调用时，组件 DOM已经更新，所以你现在可以执行依赖于 DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之
  -注意：updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick

updated: function () {
 this.$nextTick(function () {
  // 仅在整个视图都被重新渲染之后才会运行的代码 
 })
}

beforeDestroy

• 描述：实例销毁之前调用。在这一步，实例仍然完全可用。
• 注意：所有的事件监听器未被移除，所有的子实例也都未被销毁。

destroyed

• 描述：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

总结：

• 创建前后：beforeCreate、created
• 渲染前后：beforeMount、 mounted
• 更新前后： beforeUpdate、updated
• 销毁前后：beforeDestroy、destroyed