2020-09-01 Vue 组件生命周期

组件生命周期

一个组件 从创建 到 到最后销毁的整个过程

生命周期图示

• 四大阶段
• 1. 初始化
     • beforeCreate() 不常用 无法调用data以及调用methods
     • created() 已经初始化完成，完成对于 data数据的监听，在这里可以操作data和methods。 使用场景：一般在这里 调用 组件 初始化 数据的请求函数
• 2. 编译阶段，视图渲染挂载
     • beforeMount() 没啥用
     • mounted() 在这里可以获取 当前组件的 生成dom。比如：各种 库（渲染元素、swiper、better-scroll、ehcarts、富文本编辑器...）
• 3. 数据更新，视图刷新
     • beforeUpdate()
     • updated() 获取更新后的dom
• 4. 销毁，卸载
     • beforeDestroy() 在这里 应该清除 全局事件绑定，以及 定时器
     • destroyed() 实例已经销毁

组件、实例生命周期 是指一个组件从创建到销毁的整个过程，vue提供了 不同时期的生命周期的钩子函数，来监控不同的生命周期过程，在这些钩子函数中，可以做不同的操作
beforeCreate 实例初始化之前
created 实例已经初始化  在这里可以使用data和methods的方法了，一般在这个生命周期内，调用获取数据的ajax函数
beforeMount 视图渲染之前
mounted 视图已经渲染，在这里获取获取渲染后dom，可以做一些 特效（绑定一些全局的事件..）
beforeUpdate 数据更新 视图重新渲染之前
updated 数据更新 视图 渲染之后 在这里可以获取 更新后最新的dom
activated  组件激活
deactivated 组件 停止使用
beforeDestroy  实例销毁之前  在这里可以清楚定时器 销毁 全局事件如滚动
destroyed 实例销毁之后
errorCaptured  捕获错误钩子

注意：
activated
deactivated
当一个组件 通过 keepalive组件缓存 之后，所有的生命周期都不会重新调用，原因组件被缓存了没有真正的销毁。
activated 组件再一次使用时，会调用 让缓存的组件 局部刷新（调用局部刷新 数据的 请求函数）
deactivated 组件 停止使用时会调用 （清除定时器 销毁全局的事件）

组件生命周期钩子函数

  

    {{ isShow?"隐藏":'显示' }}
    
  
  

keep-alive

• 包裹其他组件，缓存其他组件,不会被销毁，只存在激活和停用
• 1. activated()
     被keep-alive组件包裹的组件，在 激活时触发
• 2. deactivated()
     被keep-alive组件包裹的组件，在 停用时时触发

  

    {{ isShow?'隐藏':'显示' }}