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

server/2025/3/3 18:05:50/

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)等现代前端应用,能够更加灵活地管理组件的状态和行为。


http://www.ppmy.cn/server/172136.html

相关文章

DeepSeek MLA(Multi-Head Latent Attention)算法浅析

目录 前言1. 从MHA、MQA、GQA到MLA1.1 MHA1.2 瓶颈1.3 MQA1.4 GQA1.5 MLA1.5.1 Part 11.5.2 Part 21.5.3 Part 3 结语参考 前言 学习 DeepSeek 中的 MLA 模块,究极缝合怪,东抄抄西抄抄,主要 copy 自苏神的文章,仅供自己参考&#…

绕过信息过滤与注入限制

绕过 information_schema 过滤 information_schema 是 MySQL 中存储元数据的系统数据库,常用于 SQL 注入中获取表名、列名等信息。当 information_schema 被过滤时,可以通过以下方法绕过。 1 替代视图 使用 sys 库(MySQL 5.7) …

第8天:面向对象编程入门 - 类与对象

第8天:面向对象编程入门 - 类与对象 一、📚 今日学习目标 🎯 掌握类与对象的定义与使用🔧 理解封装、继承、多态三大特性💡 完成银行账户管理系统实战🛠️ 学会构造函数与析构函数的编写 二、⚙️ 核心知…

微前端架构深度解析:从组合式应用到模块联邦

引言:万亿级流量的前端架构革命 Amazon将主站迁移至微前端架构后,独立模块发布速度提升800%,日均部署次数突破1500次。阿里巴巴采用qiankun框架重构跨BU应用,首屏加载性能提升320%,资源复用率达92%。Salesforce通过Mo…

JavaScript 输入输出语句

在JavaScript中,输入和输出是与用户进行直接互动的关键方式。通过输入,我们可以从用户那里获取信息;通过输出,我们能向用户展示处理结果或其他重要信息。本文将详细介绍几种常见的JavaScript输入输出方法及其应用场景。 输出语句…

Kubernetes中的HeadlessService

在Kubernetes中,Service是一种抽象概念,它定义了一组Pod的逻辑集合以及访问这些Pod的策略。而HeadlessService(无头服务)是Service的一种特殊类型。 当创建Service时,将spec.clusterIP字段设置为None,就会…

使用mermaid查看cursor程序生成的流程图

一、得到cursor生成的流程图文本 cursor写的程序正常运行后,在对话框输入框中输入诸如“请生成扫雷的代码流程图”,然后cursor就把流程图给生成了,但是看到的还是文本的样子,保留这部分内容待用 二、注册一个Mermaid绘图账号 …

【SpringBoot+Vue】博客项目开发二:用户登录注册模块

后端用户模块开发 制定参数交互约束 当前,我们使用MybatisX工具快速生成的代码中,包含了一个实体类,这个类中包含我们数据表中的所有字段。 但因为有些字段,是不应该返回到前端的,比如用户密码,或者前端传…