前端面试题---小程序跟vue的声明周期的区别

1. 小程序生命周期

小程序的生命周期主要分为 页面生命周期 和 应用生命周期。每个页面和应用都有自己独立的生命周期函数。

应用生命周期

小程序的应用生命周期函数与全局应用相关,通常包括以下几个钩子:

  • onLaunch(options):应用初始化时触发。这个函数在应用生命周期内只会调用一次。

  • onShow(options):当应用从后台进入前台时触发,比如用户打开小程序时,或者从其他页面返回时。

  • onHide():当应用进入后台时触发,比如用户退出小程序或者切换到其他应用时。

  • onError(error):当发生错误时触发,用来捕获小程序运行过程中的错误。

    页面生命周期

    小程序的页面生命周期函数与每个页面相关,通常包括以下几个钩子:

  • onLoad(options):页面加载时触发。可以获取页面传递的参数(通过 options)。

  • onShow():页面展示时触发。每次页面展示时都会触发,比如切换到这个页面时。

  • onReady():页面初次渲染完成时触发,通常是在页面首次渲染之后调用一次。

  • onHide():页面隐藏时触发,通常在切换到其他页面时触发。

  • onUnload():页面卸载时触发,页面销毁时调用,通常用于清理工作。

  • onPullDownRefresh():下拉刷新时触发。

  • onReachBottom():页面触底时触发。

  • onShareAppMessage():用户点击右上角转发时触发。

2. Vue生命周期

  • 创建阶段

    beforeCreate:组件实例被创建之后,数据观测和事件/侦听器的设置之前触发。

    created:组件实例创建完毕,数据观测和事件/侦听器已设置,但 DOM 尚未挂载。

  • 挂载阶段

    beforeMount:组件挂载前,模板已被编译,DOM 还未渲染。

    mounted:组件挂载到 DOM 上后调用,此时组件的 DOM 已经存在。

  • 更新阶段

    beforeUpdate:数据更新之前调用,此时数据改变,但 DOM 尚未重新渲染。

    updated:数据更新后,DOM 重新渲染后触发。

  • 销毁阶段

    beforeDestroy:组件销毁之前调用,通常用于清理工作。

    destroyed:组件销毁之后调用。

3 主要区别

4. 具体差异分析

  • 生命周期管理:

    小程序的生命周期相对简单,只有页面和应用两级生命周期。每个页面和应用都在独立的生命周期下运行,而 Vue 更加专注于组件化的生命周期,允许开发者精细控制组件的创建、更新、销毁等过程。

  • 更新机制:

    小程序通过 setData() 来更新数据和视图。视图更新是通过数据的变化来触发的,但这与 Vue 的响应式系统不同,Vue 会自动跟踪数据变化并进行视图更新。

  • 钩子函数:

    Vue 提供了更多的生命周期钩子函数,可以更精细地控制组件的不同阶段。小程序则更注重页面级别的控制,比如通过 onLoad、onShow、onHide 等钩子来管理页面的状态和生命周期。

5. 结论

小程序 的生命周期函数较为简单,适合处理应用和页面级的生命周期,适用于以页面为中心的开发模型。

Vue 则是基于组件化思想,提供了更为细粒度的生命周期钩子,适用于开发单页应用(SPA)等现代前端应用,能够更加灵活地管理组件的状态和行为。

相关推荐
3Katrina1 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者7 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享16 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享17 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海21 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子31 分钟前
深入理解TCP协议
前端·javascript·面试
万少32 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html