05-vue学习-生命周期钩子函数

生命周期钩子函数

组件从创建开始到被销毁结束所经历的各个阶段。
如下图：引用vue官网

create阶段

• beforeCreate
  在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
• created
  在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

mounte阶段

• beforeMount
  在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
• mounted
  在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。

update阶段

• beforeUpdate
  在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
  该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
• updated
  在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

destory阶段

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

使用keep-alive

• activated
  被 keep-alive 缓存的组件激活时调用
• deactivated
  被 keep-alive 缓存的组件失活时调用。

errorCaptured
在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

nextTick()
作用：在下一次DOM 更新循环结束后延迟执行回调函数。在修改数据之后立即使用这个方法，获取更新的DOM。