vue组件的生命周期

组件的生命周期

组件在 初始化（new Vue（VueComponent））到最后销毁 不同阶段
（人–出生—死亡）

hooks 生命周期钩子函数（在组件不同生命周期阶段中，自动运行的函数、方法）

• 实例初始化
  beforeCreate 刚刚调用new Vue 还没有去 劫持data中的数据(不能操作数据)
  created 实例创建完成、数据已经灌入、已经劫持data,data中的数据已经是响应式的（可以操作数据了）
  页面默认ajax请求 函数调用 最好在created中调用（在mounted也行 推荐created）
• dom挂载 模板渲染（将组件的template 编译成虚拟dom。然后变成真实dom挂载页面上）
  beforeMount 组件首次加载，在 模板渲染之前触发
  mounted 组件首次加载，模板渲染完毕后触发 在这里获取 真实dom
• 数据更新阶段
  beforeUpdate 数据更新，模板在重新渲染挂载之前 在这里获取不到 更新后的dom
  updated 数据更新，视图已经渲染完成了，在这里 获取 更新后最新的dom
• 组件卸载
  beforeDestroy 组件卸载之前 （实例方法还可以调用）
  在这里应该 清除当前组件中 定义的定时器、注销全局事件（window）
  destroyed 组件已经卸载完成（实例没了）

组件 在隐藏（v-if）的时候 可以缓存起来 不销毁

另外两个钩子

• activated 组件再一次被激活时触发 使用场景 是被 keep-alive组件缓存的组件 再一次显示时触发
  组件一旦被 keep-alive包裹，那么这么组件就不会销毁了，所有数据不会更新（想要更新就在activated去重新发送请求）
  
  <组件 v-if=“isShow”/>
  
• deactivated 组件隐藏时触发
  组件一旦被 keep-alive包裹，那么这么组件就不会销毁了，在这里可以做全局事件的注销以及定时器的清除