Vue/小程序生命周期

你好,我是Qiuner. 为记录自己编程学习过程和帮助别人少走弯路而写博客 这是我的 github gitee

如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^)

想看更多 那就点个关注吧 我会尽力带来有趣的内容

Vue.js 2.x 生命周期钩子

1. beforeCreate：实例刚创建，数据观测和事件配置之前被调用。

2. created：实例已经创建完成，数据观测和事件配置已完成，但 DOM 还未生成，无法访问 el。

3. beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted：挂载完成后调用，实例已经挂载到 DOM 上，可通过 vm.$el 访问到 DOM 元素。

5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

6. updated：数据更新之后调用，发生在虚拟 DOM 重新渲染和打补丁之后。

7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

8. destroyed：实例销毁之后调用。Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

Vue.js 3.x 生命周期钩子

Vue 3 中使用了 Composition API，生命周期钩子被重新设计，不再是钩子函数，而是普通的函数。

1. setup：在组件实例初始化之后，数据绑定和虚拟 DOM 创建之前被调用。

2. onBeforeMount：在挂载之前调用。

3. onMounted：在挂载之后调用。

4. onBeforeUpdate：在更新之前调用。

5. onUpdated：在更新之后调用。

6. onBeforeUnmount：在卸载之前调用。

7. onUnmounted：在卸载之后调用。

8. onErrorCaptured：当子组件抛出错误时被调用。

小程序生命周期

1. onLoad：监听页面加载。

2. onShow：监听页面显示。

3. onReady：监听页面初次渲染完成。

4. onHide：监听页面隐藏。

5. onUnload：监听页面卸载。

6. onPullDownRefresh：监听用户下拉动作。

7. onReachBottom：页面上拉触底事件的处理函数。

8. onShareAppMessage：用户点击右上角转发。

9. onPageScroll：页面滚动触发事件的处理函数。

10. onTabItemTap：当前是 tab 页时，点击 tab 时触发。

11. onResize：页面尺寸改变时触发，小程序端未实现。

12. onShow：当页面显示出来时，小程序端未实现。