每天10个前端小知识＜Day 11＞

最新推荐文章于 2024-07-16 17:18:30 发布

谁可共你比99

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量92

点赞数

文章标签：前端面试 javascript vue

本文链接：https://blog.csdn.net/m0_57023359/article/details/131963443

版权

1.html新增了哪些标签
1.1 <head>: 定义文档或节的页面
1.2 <nav>：定义文档的导航连接部分
1.3 <section>：定义文档中的节或区域
1.4 <article>：定义独立的自包含文章内容
1.5 <aside>: 定义页面内容之外的内容，如侧边栏或广告
1.6 <footer>: 定义文档或节的页脚
1.7 <main>: 定义文档的主要内容
1.8 <figure>: 定义自包含的媒体内容，如图像、图表或视频
1.9 <figcaption>：定义<figure>元素的标题
1.10 <video>：定义视频
1.11 <audio>: 定义音频
1.12<canvas>: 定义用于绘制图形的画布
1.13<datalist>: 定义输入字段的选项列表
1.14 <progress>: 定义任务的进度条
1.15 <meter>: 定义度量衡的标量值
1.16 <time>：定义日期或时间
1.17<mark>: 定义突出显示的文本
1.18 <details>: 定义用户可查看或隐藏的附加细节

2.怎么理解vuex
在vue.js中，vuex是一种用于管理应用程序状态的官方状态管理模式。它允许您在应用程序的不同组件之间共享和访问数据，以及在整个应用程序中进行状态的一致性管理。以下是对vuex的一些理解：
1.集中式存储：vuex将应用程序的状态存储在一个单一的地方，成为“store”。这个store类似于一个全局对象，可以在应用程序的任何组件中访问。
2.状态管理：vuex提供了一种管理状态的方式，以确保状态的一致性。通过定义状态和在store中进行修改，您可以追踪应用状态的变化，并在需要时进行响应。
3.状态的响应式更新：当在组件中修改store中的状态时，所有依赖于该状态的组件会自动更新，确保应用程序中的所有组件保持同步。
4.模块化：vuex允许您将store分割成模块，每个模块可以有自己的状态、操作、获取器和提交方式。这样可以更好的组织和管理大型应用程序的状态。
5.方便的数据获取和修改：通过使用vuex的getters和mutations，您可以方便的获取和修改store中的状态，而不需要在组件之间传递数据或使用事件总线。

3.单页面vs多页面的理解
单页面应用和多页面应用是两种不同的前端应用架构方式
单页面应用（SPA）：
SPA是一种基于JavaScript的应用程序，通过动态地更新当前页面的部分内容，而不是每次加载整个页面来实现页面切换和交互。
SPA通常使用前端框架（如vue.js、React等）来实现，通过路由机制来管理不同的页面状态
SPA的优点包括更流畅的用户体验、更快的页面切换速度、减少服务器负载、更方便的开发和维护
缺点包括初始加载时间较长、对SEO不友好（需要额外处理）、较大的JavaScript包大小
多页面应用（MPA）：
MPA是一种传统的web应用程序架构，每个页面都是一个独立的HTML文件，每次页面切换都需要重新加载整个页面。
MPA通常使用服务器渲染（SSR）或模版引擎来生成不同的页面
MPA的优化包括更好的SEO支持、更快的初始加载时间，更小的JavaScript包大小
缺点包括页面切换速度较慢、用户体验相对较差、开发和维护相对复杂
选择SPA还是MPA取决于具体的应用需求。如果您需要更流畅的用户体验、更快的页面切换速度和更方便的开发体验，可以选择SPA。如果您需要更好的SEO支持、更快的初始加载时间和更小的JavaScript包大小，可以选择MPA。

4.vue-loader是什么
vue-loader是一个webpack加载器（loader），用于将vue单文件组件（.vue文件）转换为JavaScript模块
vue单文件组件是一种将组件的模块、样式和逻辑封装在一个文件中的方式。它包含三个部分：
1.模块（template）：用于定义组件的结构和布局，使用vue的模块语法编写
2.样式（style）：用于定义组件的样式，可以使用css、sass、less等预处理器编写
3.逻辑（script）：用于定义组件的行为和数据，使用JavaScript编写
使用vue-loader，可以将部分合并为一个JavaScript模块，以便在应用程序中进行加载和使用
vue-loader还提供了许多其他功能，例如：
支持预处理器：可以使用sass、less等预处理器编写样式
支持css模块化：可以将样式文件作为模块导入，并在组件中使用模块化的类名
支持热重载：在开发过程中，可以实时预览和调试组件的修改，无需刷新页面
支持自定义块：可以在单文件组件中定义自定义块，用于编写其他类型的代码（如模块引擎、Markdowm等）。
总之，vue-loader是一个用于将vue单文件组件转换为JavaScript模块的webpack加载器，提供了许多功能和扩展，使得开发vue应用程序更加方便和高效。

5.router和router有什么区别
1.router（路由器）：路由器是一种网络设备，用于在计算网络中转发数据包。它连接多个网络，并根据目标地址来确定数据包的最佳路径，以便将其从源网络发送到目标网络。路由器通常用于在互联网中转发数据。
2.route（路由）：路由是指在网络中定义的路径。用于将数据包从源地址发送到目标地址。路由是由网络管理员配置的，它指定了数据包在网络中的传输路径。路由可基于不同的因素进行选择，例如最短路径、最快路径或特定的网络策略。

6.vue中的路由模式有哪些
1.Hash模式：默认模式，URL中会有一个#符号，例如example.com/#/route。在这种模式下，路由的改变不会触发浏览器的页面刷新，而是通过监听URL中的hash变化来进行路由切换。
2.history模式：通过使用HTML的History API，URL中不再有#符号，例如example.com/route。在这种模式下，路由的改变会修改浏览器的历史记录，并触发浏览器的页面刷新

7.vue2.x和3.x的diff算法有什么区别
vue.js 3.x的diff算法相对于2.x更加高效，通过静态标记和其他优化措施，可以减少不必要的操作和提升性能。这使得3.x在性能方面有了显著的改进。

8.js中的== 和=== 有什么区别
1.==操作符进行相等比较时，会进行类型转换。他会尝试将两个操作数转换为相同类型，然后在进行比较
2.===操作符进行严格相等比较时，不会进行类型转换。他会首先比较两个操作数的类型，如果类型不同，则直接返回false。只有当类型相同且值相等时，才会返回true。

9.iframe的优缺点是什么
优点：
1.分离内容：iframe可以将页面内容分割成独立的区块，每个区块可以有自己独立的html、css和JavaScript。这样可以实现模块化开发和维护，方便团队协作。
2.安全性：iframe可以提供一定的安全性，因为他可以将外部内容隔离在一个独立的环境中，这可以防止外部内容对主页面的恶意攻击，例如跨站脚本攻击（XSS）
3.并行加载：使用iframe可以实现页面的并行加载，因为每个iframe都有独立的请求和加载过程。这可以提高页面的加载性能，特别是在处理大量内容或延迟加载时
缺点：
4.SEO难度：搜索引擎对于iframe中的内容处理相对困难，可能无法正确解析和索引其中的内容，从而影响页面的搜索引擎优化（SEO）
5.页面性能：每个iframe都需要加载独立的HTML、css和JavaScript，这会增加页面的请求和加载时间，降低页面的性能
6.交互限制：由于浏览器的安全策略，跨域的iframe之间的通信受到限制，无法直接访问和操作对方的内容。这可能导致一些交互功能的实现困难

10.vue的双向数据绑定的原理
vue的双向数据绑定是通过Object.defineProperty（）方法来实现的
当vue实例化时，vue会遍历data对象中的属性，并使用Object.defineProperty（）将每个属性转换为getter和setter。这样，当数据属性被读取或修改时，vue就能捕获到，并触发相应的更新，
具体的实现步骤如下：
1.vue遍历data对象中的属性
2.对于每个属性，vue使用Object.defineProperty（）将其转换为getter和setter。
3.在getter中，vue将属性的值返回给调用者，并进行依赖收集。这意味着vue会追踪每个属性的依赖关系，以便在属性发生变化时，能够通知相关的组件进行更新
4.在setter中，vue接收到属性的新值，并将其存储起来。然后，vue会触发相应的更新，通知相关的组件进行重新渲染。
通过这种方式，vue实现了双向数据绑定。当数据发生变化时，视图会自动更新；当用户与视图进行交互时，数据也会自动更新。