Vue面试常见知识总结2——spa、vue按需加载、mvc与mvvm、vue的生命周期、Vue2与Vue3区别

SPA

SPA（Single Page Application，单页面应用）是一种Web应用程序架构，其核心特点是在用户与应用程序交互时，不重新加载整个页面，而是通过异步加载页面的局部内容或使用JavaScript动态更新页面。以下是对SPA的详细解析，包括其优点和缺点：

SPA的优点

  1. 更好的用户体验：
    • SPA无需重新加载整个页面，使用户在应用程序中浏览时感觉更为流畅，提高了用户体验。
    • 页面局部更新和资源异步加载提高了应用的响应速度，减少了等待时间。
  2. 更快的页面加载速度：
    • SPA只加载一次HTML、CSS和JavaScript文件，后续交互仅加载必要的数据，从而提高了页面加载速度。
  3. 更少的HTTP请求：
    • SPA减少了HTTP请求的数量，因为大部分内容在初始化时加载完成，后续只需获取必要的数据。
  4. 减轻服务器压力：
    • 后端仅需提供数据接口，而不需要构建和维护多个页面的HTML，从而减轻了服务器的负担。
  5. 模块化：
    • SPA通常采用模块化的前端框架（如React、Angular、Vue等），便于组织和管理代码。
  6. 可维护性：
    • 模块化和组件化开发提高了代码的可维护性，使开发更为灵活。
  7. 资源缓存：
    • SPA应用可以在离线情况下正常工作，提供离线访问能力，因为一旦所有资源加载完成，就可以离线使用。
  8. 丰富的用户交互：
    • 页面的局部更新和动态加载允许实现丰富的用户交互，提供更具吸引力的界面。

SPA的缺点

  1. 较大的初始加载时间：
    • SPA需要加载所有内容，因此其初始加载时间可能较长，可能导致用户在初次访问时等待较长时间。
  2. 较高的内存使用：
    • SPA加载所有内容到内存中，可能会消耗更多的内存，长时间运行可能导致内存占用增加。
  3. 对JavaScript的依赖：
    • SPA对JavaScript的依赖较高，如果用户禁用了JavaScript，将无法正常使用。
  4. SEO影响：
    • 由于SPA的内容通过JavaScript加载，搜索引擎可能难以索引，虽然现代搜索引擎可以处理JavaScript，但仍可能存在一些问题。
  5. 浏览器历史管理复杂：
    • SPA不会重新加载页面，因此浏览器的前进后退按钮可能无法正常工作，需要特殊处理。
  6. 内存泄漏风险：
    • 不良的内存管理可能导致内存泄漏问题，需要开发者注意。

综上所述，SPA作为一种现代Web应用架构，在提供更好用户体验、提高页面加载速度和减轻服务器压力等方面具有显著优势，但同时也存在初始加载时间长、内存使用高、对JavaScript依赖强等缺点。开发者在选择SPA架构时，需要权衡其优缺点，根据具体需求做出合适的选择。

Vue中按需加载

Vue的按需加载（也称为延迟加载或懒加载）是一种优化技术，它允许应用程序只在需要时才加载相应的组件或资源，而不是在初始化时加载所有内容。这种方式对于提升应用性能、减少首屏加载时间、改善用户体验非常有帮助。Vue实现按需加载主要有以下几种方式：

1. Vue异步组件技术

Vue提供了异步组件的概念，允许在需要时才加载组件。这可以通过在组件定义时使用一个函数来实现，该函数返回一个Promise，该Promise解析为需要加载的组件。在Vue Router中配置路由时，可以使用这种方式来实现路由的按需加载。

示例代码：

const AsyncComponent = () => import('./AsyncComponent.vue');  const routes = [  { path: '/async', component: AsyncComponent }  
];

这种方式下，当访问/async路由时，AsyncComponent.vue才会被加载。

2. ES提案的import()

ES6引入的import()语法允许在代码中的任何位置动态地导入模块。与静态import语句不同，import()返回一个Promise对象，这个Promise解析为导入的模块。在Vue项目中，import()经常被用于Vue Router的路由配置中，以实现路由的按需加载。

示例代码（使用webpack的webpackChunkName注释来指定代码块名称）：

const AsyncComponent = () => import(/* webpackChunkName: "group-async-component" */ './AsyncComponent.vue');  const routes = [  { path: '/async', component: AsyncComponent }  
];

通过指定webpackChunkName，webpack可以将多个按需加载的组件合并到一个代码块中，以优化加载性能。

3. Webpack的require.ensure()

Webpack提供了一个require.ensure()方法，该方法允许将模块分割成不同的代码块，并在需要时按需加载它们。然而，需要注意的是，随着webpack的发展，require.ensure()已经逐渐被import()语法所取代，因为import()提供了更简洁的语法和更好的集成到现代JavaScript中的方式。

尽管如此，在某些情况下，特别是在需要向后兼容较旧代码库时，require.ensure()仍然是一个可行的选择。

示例代码（注意：这个例子更偏向于展示require.ensure()的用法，而非Vue的特定实现）：

require.ensure([], function(require) {  var AsyncComponent = require('./AsyncComponent.vue');  // 使用AsyncComponent进行一些操作  
}, 'chunkName');

总结

Vue的按需加载是提升应用性能的重要手段之一。通过Vue异步组件技术、ES提案的import()语法或Webpack的require.ensure()方法（尽管后者逐渐被淘汰），可以实现组件或资源的按需加载，从而减少首屏加载时间、改善用户体验。在实际项目中，推荐优先使用import()语法，因为它不仅简洁而且与现代JavaScript标准紧密集成。

MVC与MVVM

MVC

如果前端没有框架，只使用原生的html+js，MVC模式可以这样理解：

  • 将html看成view，js看成controller，负责处理用户与应用的交互，响应对view的操作（对事件的监听），调用Model对数据进行操作，完成model与view的同步（根据model的改变，通过选择器对view进行操作）；
  • 将js的ajax当做Model，也就是数据层，通过ajax从服务器获取数据。

过程：

  • View 传送指令到 Controller

  • Controller 完成业务逻辑后，要求 Model 改变状态

  • Model 将新的数据发送到 View，用户得到反馈

MVVM

Vue MVVM这一篇就够啦！_vue r mvvm-CSDN博客

 Vue2与Vue3的生命周期

 

 

生命周期阶段Vue2 钩子函数Vue3 钩子函数作用说明
初始化前beforeCreateonBeforeCreate组件实例被创建之前调用，此时组件的数据观测(data observer)、事件/侦听器的配置等还未完成，el属性目前不可见。
初始化后createdsetup组件实例创建完成后被立即调用。在这一步，实例已完成数据观测(data observer)、属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。Vue3中，setup函数替代了created和beforeCreate阶段，所有的组合式API逻辑都应该放在setup函数中。
挂载前beforeMountonBeforeMount在挂载开始之前被调用：相关的render函数首次被调用。该钩子在服务器端渲染期间不被调用。
挂载后mountedonMountedel被新创建的vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el也在文档内。
更新前beforeUpdateonBeforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。
更新后updatedonUpdated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件DOM已经更新，所以现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
卸载前beforeDestroyonBeforeUnmount实例销毁之前调用。在这一步，实例仍然完全可用。
卸载后destroyedonUnmountedVue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  • Vue3中的生命周期钩子函数名大多以"on"开头，与Vue2中的命名方式有所不同。
  • Vue3引入了组合式API（Composition API），其中setup函数是围绕beforeCreate和created生命周期钩子运行的，因此不需要显式地定义这两个钩子。
  • Vue3的生命周期钩子函数可以通过Composition API的import语句从'vue'中引入，并在setup函数中使用。
  • Vue3对生命周期函数的触发时机和合并方式进行了优化，以提高性能和开发体验。

 Vue2与Vue3区别

Vue2与Vue3在多个方面存在显著的差异，这些差异主要体现在响应式原理、组件结构、API设计、生命周期钩子以及性能优化等方面。以下是对这些差异的详细解析，并在最后以表格形式进行对比。

详细解析

  1. 响应式原理
    • Vue2：使用ES5的Object.defineProperty()方法来实现数据的响应式。这种方法只能监听对象属性的变化，对于数组的变化需要特殊处理，且不能监听对象属性的添加或删除。
    • Vue3：采用ES6的Proxy对象来代理整个对象，从而实现对对象属性的监听，包括属性的添加、删除以及数组内部的变化。这种方式更加高效且易于维护。
  2. 组件结构
    • Vue2：组件模板中只能有一个根节点，这限制了组件的灵活性。
    • Vue3：支持多个根节点的组件，即Fragment（碎片），这可以减少不必要的包装元素，使组件结构更加清晰。
  3. API设计
    • Vue2：使用选项型API（Options API），将组件的不同部分（如数据、计算属性、方法等）分散在组件的选项中。
    • Vue3：引入合成型API（Composition API），允许使用函数来组织逻辑，使得代码更加灵活和可复用。同时，Vue3也保留了选项型API，但推荐使用合成型API。
  4. 生命周期钩子
    • Vue2：直接在组件的选项中定义生命周期钩子，如created、mounted等。
    • Vue3：大部分生命周期钩子的名称前加上了on前缀，如onMounted、onUpdated等。同时，Vue3中的setup函数替代了Vue2中的beforeCreate和created阶段，用于执行组件的初始化逻辑。
  5. 性能优化
    • Vue3在性能上进行了多项优化，包括更快的响应式系统、更高效的编译和渲染过程等。此外，Vue3还提供了Teleport和Suspense等新的组件，以支持更复杂的场景和更平滑的用户体验。
特性Vue2Vue3
响应式原理使用Object.defineProperty()使用Proxy
组件结构只能有一个根节点支持多个根节点（Fragment）
API设计选项型API（Options API）合成型API（Composition API），同时保留选项型API
生命周期钩子直接在组件选项中定义大部分钩子名称前加on前缀，setup函数替代beforeCreate和created
性能优化-更快的响应式系统、更高效的编译和渲染过程等
新增组件-Teleport、Suspense等

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/414207.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

突破代码：克服编程学习中的挫折感

突破代码：克服编程学习中的挫折感

目录 一、心态调整：心理韧性的培养 接受挫折是学习的一部分 设置实际的学习目标 保持学习的乐趣 二、学习方法：策略的实施 逐步解决问题 寻找多样的学习资源 定期复习与实践 三、成功经验：实例的启示 Debug的技巧掌握 算法的深入理…
阅读更多...
APP测试（十一）

APP测试（十一）

APP测试要点提取与分析 一、功能测试 APP是什么项目？核心业务功能梳理清楚 — 流程图分析APP客户端的单个功能模块 — 细化分析 需要使用等价类，边界值，考虑正常和异常情况（长度，数据类型，必填&#xff0…
阅读更多...
【微机原理】v和∧区别

【微机原理】v和∧区别

🌟 嗨，我是命运之光！ 🌍 2024，每日百字，记录时光，感谢有你一路同行。 🚀 携手启航，探索未知，激发潜能，每一步都意义非凡。 在汇编语言和逻辑表达…
阅读更多...
【C++ Primer Plus习题】8.7

【C++ Primer Plus习题】8.7

问题: 解答: #include <iostream>using namespace std;template <typename T> T SumArray(T arr[], int n) {T sum arr[0] - arr[0];for (int i 0; i < n; i){sum arr[i];}return sum; }template <typename T> T SumArray(T *arr[], int n) {T sum *…
阅读更多...
Vue3:通信组件

Vue3:通信组件

1.Props 父传子&#xff1a;直接传递需要获取的属性 子传父&#xff1a;需要借助函数&#xff0c;也就是方法&#xff0c;通过传递函数&#xff0c;子接着入参给函数&#xff0c;父调用函数即可获取到参数。 父&#xff1a; <template><div class"father&quo…
阅读更多...
python破解[5分钟解决拼多多商家后台字体加密]

python破解[5分钟解决拼多多商家后台字体加密]

可【QQ群】拿源码 进入经营总览想把数据存下来发现返回的json数据部分空白如下 这可怎么办 稳住应该是字体的问题&#xff0c;可能是多多自己实现了某种字体&#xff0c;我们去找他的js 发现如我们所想&#xff0c;进行跟踪&#xff0c;发现的确是在css端进行了字体替换&am…
阅读更多...
【高阶数据结构】图的应用--最小生成树

【高阶数据结构】图的应用--最小生成树

一、最小生成树 连通图中的每一棵生成树&#xff0c;都是原图的一个极大无环子图&#xff0c;即&#xff1a;从其中删去任何一条边&#xff0c;生成树就不在连通&#xff1b;反之&#xff0c;在其中引入任何一条新边&#xff0c;都会形成一条回路。 若连通图由n个顶点组成&am…
阅读更多...
华为云征文|基于Flexus云服务器X实例的应用场景-部署脚手架开源项目若依

华为云征文|基于Flexus云服务器X实例的应用场景-部署脚手架开源项目若依

&#x1f534;大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 先看这里 写在前面**Flexus X实例**的云服务器简介环境准备若依项目拉取导入数据库启动本地项目&#xff08;后端&#xff09;启动本地项目&#xff08;前端&#xff09;打包后…
阅读更多...
Linux——性能调优工具一览

Linux——性能调优工具一览

一、CPU 1.调优工具 根据指标找工具 性能指标工具说明 平均负载 uptime、top uptime最简单、top提供了更全的指标 系统整体CPU使用率 vmstat、mpstat、top、sar、/proc/stat top、vmstat、mpstat只可以动态查看&#xff0c;而sar还可以记录历史数据 /proc/stat是其他性…
阅读更多...
【知识图谱】4、LLM大模型结合neo4j图数据库实现AI问答的功能

【知识图谱】4、LLM大模型结合neo4j图数据库实现AI问答的功能

昨天写了一篇文章&#xff0c;使用fastapi直接操作neo4j图数据库插入数据的例子&#xff0c; 本文实现LLM大模型结合neo4j图数据库实现AI问答功能。 废话不多说&#xff0c;先上代码 import gradio as gr from fastapi import FastAPI, HTTPException, Request from pydantic…
阅读更多...
HarmonyOS开发实战（ Beta5版）耗时分析器Time Profiler实践指导

HarmonyOS开发实战（ Beta5版）耗时分析器Time Profiler实践指导

DevEco Studio集成的DevEco Profiler性能调优工具&#xff08;以下简称为Profiler&#xff09;&#xff0c;提供Time、Allocation、Snapshot、CPU等场景化分析任务类型。开发应用或服务过程中&#xff0c;如果遇到卡顿、加载耗时等性能问题&#xff0c;开发者通常会关注相关函数…
阅读更多...
机器学习周报（8.26-9.1）

机器学习周报（8.26-9.1）

文章目录 摘要Abstractself-attetionQKV理解如何让self-attention更有效local attention/truncated attention方法stride attention方法Global Attention方法data driving方法Clusteringsinkhorn sorting network选取representative keys减少Keys数量的方法self-attentionSynth…
阅读更多...
jQuery库

jQuery库

注明&#xff1a;本文参考自&#xff1a;jQuery - 白月黑羽 (byhy.net) jQuery安装 Download jQuery | jQuery下载到本地 ps: script标签中的src属性&#xff1a;表示包含要执行的代码的外部文件位置 <!DOCTYPE html> <html lang"en"><head><s…
阅读更多...
让自家的智能语音助手实现todo任务的添加

让自家的智能语音助手实现todo任务的添加

我家的树莓派在成为了“智能语音助手”后&#xff0c;经过rasa学习训练&#xff0c;已经可以帮忙查日期/时间&#xff0c;查天气预报&#xff0c;进行一些简单的闲聊。但是&#xff0c;我希望它的功能还可以再强大些&#xff0c;比如说&#xff0c;可以帮我记录todo任务。为了实…
阅读更多...
当网络适配器的Wireless出现感叹号

当网络适配器的Wireless出现感叹号

1.出现如下情况 链接&#xff1a; &#xff1a;一招搞定Intel(R) Wireless-AC 9560显示感叹号&#xff0c;无法打开wifi模块&#xff01;_intel(r)wireless-ac9560感叹号-CSDN博客z 重点&#xff1a; 原因是因为电脑静电的问题。
阅读更多...
生产es所有节点全部掉线 排查

生产es所有节点全部掉线 排查

生产es所有节点全部掉线 查看message日志发现 内存溢出 修改jvm的改小 清理buff/cache sync && echo 1 > /proc/sys/vm/drop_caches sync && echo 2 > /proc/sys/vm/drop_caches sync && echo 3 > /proc/sys/vm/drop_caches 把es内存的…
阅读更多...
Bean 的生命周期

Bean 的生命周期

什么是Bean的生命周期 Bean 的生命周期就是&#xff1a;对象从创建开始到最终销毁的整个过程&#xff0c;Bean 对象从创建到销毁中经历了哪些过程 什么时候创建Bean对象&#xff1f;创建Bean对象的前后会调用什么方法&#xff1f;Bean对象什么时候销毁&#xff1f;Bean对象的销…
阅读更多...
13-springcloud gateway集成nacos实现负载均衡

13-springcloud gateway集成nacos实现负载均衡

网关作为访问系统的入口&#xff0c;负载均衡是必选项而不是可选项&#xff0c;本文介绍gateway与nacos集成&#xff0c;实现负载均衡的过程。关于springcloud gateway的基本用法&#xff0c;同学可以看看上篇文章: 12-使用gateway作为网关。 0、环境 jdk&#xff1a;1.8spri…
阅读更多...
idea插件开发的第一天-写一个小Demo

idea插件开发的第一天-写一个小Demo

介绍 Demo说明 本文基于maven项目开发,idea版本为2022.3以上,jdk为1.8本文在Tools插件之上进行开发 Tools插件说明 Tools插件是一个Idea插件,此插件提供统一Spi规范,极大的降低了idea插件的开发难度,并提供开发者模块,可以极大的为开发者开发此插件提供便利Tools插件安装需…
阅读更多...
LLM系列 | 36：Google最新开源大模型：Gemma 2介绍及其微调(下篇)

LLM系列 | 36：Google最新开源大模型：Gemma 2介绍及其微调(下篇)

引言 环境安装 数据准备 下载 处理 模型训练 模型inference 结果 gemma-2-9b gemma-2-9b-it 引言 低头观落日&#xff0c;引手摘飞星。 小伙伴们好&#xff0c;我是微信公众号《小窗幽记机器学习》的小编&#xff1a;卖黑神话的小女孩。本文紧接前文Google最新开源大…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023