1.MVVM

MVVM（Model-View-ViewModel）是一种前端开发架构模式。它将应用程序分为三个主要部分：

• 模型（Model）：负责存储和管理应用程序的数据。可以是数据库、服务器端 API 或本地存储中的数据。
• 视图（View）：负责展示用户界面。通常是 HTML、CSS 和 JavaScript 代码组成的页面。
• 视图模型（ViewModel）：连接模型和视图的中间层。它将模型中的数据转换为视图可以显示的格式，并处理用户与视图的交互。

MVVM 的主要优点有：

• 分离关注点：将数据和界面逻辑分离，使得代码更易于维护和测试。
• 双向数据绑定：实现了视图和模型之间的自动同步，减少了手动更新数据和界面的工作量。
• 提高开发效率：通过使用数据绑定和声明式编程，开发人员可以更快速地构建用户界面，减少了繁琐的 DOM 操作。

1.Vue 响应式原理

Vue 的响应式原理主要通过以下几个步骤实现：

• 数据劫持：Vue 使用Object.defineProperty()方法对数据对象的属性进行劫持，当数据被访问或修改时，可以触发相应的操作。
• 依赖收集：在读取数据时，Vue 会收集依赖于该数据的 Watcher（观察者）。Watcher 可以是组件的渲染函数、计算属性函数等。
• 数据变化通知：当数据被修改时，Vue 会通知所有依赖于该数据的 Watcher，触发它们的更新操作。
• 视图更新：Watcher 在接收到数据变化通知后，会执行相应的更新操作，从而更新视图。

通过这种方式，Vue 实现了数据和视图的自动同步，当数据变化时，视图会自动更新，无需手动操作 DOM。

2.Vue 数据双向绑定

Vue 的数据双向绑定是指在表单元素（如输入框、复选框等）和数据之间建立自动同步的机制。当表单元素的值发生变化时，数据也会相应地更新；反之，当数据发生变化时，表单元素的值也会更新。

Vue 实现数据双向绑定主要通过以下方式：

• v-model指令：在表单元素上使用v-model指令，Vue 会自动将表单元素的值与数据进行绑定。当表单元素的值发生变化时，数据会自动更新；当数据发生变化时，表单元素的值也会更新。
• 数据劫持和依赖收集：与 Vue 的响应式原理类似，Vue 会对数据进行劫持，并在读取数据时收集依赖于该数据的 Watcher。当表单元素的值发生变化时，会触发数据的 setter 方法，从而通知依赖于该数据的 Watcher 进行更新。

3.Vue 状态更新后如何渲染页面的

当 Vue 的状态更新时，Vue 会通过以下步骤渲染页面：

• 数据变化通知：当数据被修改时，Vue 会通知所有依赖于该数据的 Watcher。
• Watcher 更新：Watcher 在接收到数据变化通知后，会执行相应的更新操作。对于组件的渲染 Watcher，它会重新执行组件的渲染函数，生成新的虚拟 DOM。
• 虚拟 DOM 对比：Vue 会将新生成的虚拟 DOM 与旧的虚拟 DOM 进行对比，找出两者之间的差异。
• 真实 DOM 更新：根据虚拟 DOM 的差异，Vue 会对真实 DOM 进行最小化的更新操作，只更新发生变化的部分，从而提高性能。

4、vue 和 react 的 diff 算法区别是什么

• Vue 的 diff 算法

  • Vue 的 diff 算法是基于双端比较的。在更新虚拟 DOM 时，Vue 会同时从新旧虚拟 DOM 的两端开始比较，找到相同的节点进行更新，提高了比较的效率。
  • 对于列表的更新，Vue 会通过 key 属性来识别节点，尽量复用相同的节点，减少 DOM 操作。

• React 的 diff 算法

  • React 的 diff 算法是基于单端比较的。它首先比较根节点，如果根节点不同，则直接替换整个子树。如果根节点相同，则继续比较子节点。
  • React 的 diff 算法采用了启发式的策略，对于同层级的节点，它会假设节点的位置是不变的，只进行同位置节点的比较。如果节点的位置发生了变化，React 会进行额外的处理，但可能会导致一些不必要的 DOM 操作。

5、react 的 fiber 机制

React 的 Fiber 机制是一种对 React 核心算法的重新实现，旨在提高 React 应用的性能和响应性。

• 任务分割：将渲染任务分割成小的任务单元，称为 Fiber。每个 Fiber 代表一个虚拟 DOM 节点，可以暂停、恢复和重新调度任务。这样可以避免长时间占用主线程，使得浏览器有机会处理用户输入和其他事件。
• 优先级调度：Fiber 机制引入了优先级的概念，可以根据任务的优先级来决定哪些任务先执行，哪些任务可以延迟执行。例如，用户交互相关的任务会被赋予较高的优先级，优先执行，以保证应用的响应性。
• 增量渲染：Fiber 机制支持增量渲染，即可以在部分渲染完成后就显示给用户，而不是等待整个渲染过程完成。这样可以减少用户等待的时间，提高用户体验。
• 可中断和恢复：渲染过程可以被中断，然后在合适的时候恢复。例如，当浏览器有更高优先级的任务需要处理时，React 可以暂停渲染，等浏览器空闲时再继续。

6、vue-router 的 api 有哪些，使用的场景是什么

• Vue Router 的 API

  • router.push()：导航到指定的路由，可以传递参数。
  • router.replace()：导航到指定的路由，替换当前历史记录。
  • router.go()：在历史记录中向前或向后导航。
  • router.back()：后退一步。
  • router.forward()：前进一步。
  • $route：当前激活的路由信息对象，包含路由的路径、参数、查询参数等。
  • $router：路由器实例，可以访问路由的各种方法和属性。

• 使用场景

  • 单页应用（SPA）：Vue Router 是构建单页应用的重要组成部分，用于管理应用的不同页面和导航。
  • 页面切换和路由过渡：可以实现页面之间的平滑过渡效果，提升用户体验。
  • 路由参数传递：在不同页面之间传递参数，方便数据的共享和处理。
  • 导航守卫：可以在路由切换前后执行一些逻辑，如权限验证、登录状态检查等。

1.CDN

CDN（Content Delivery Network）即内容分发网络。它是一组分布在不同地理位置的服务器，用于存储和分发静态内容，如图片、脚本、样式表等。

CDN 的主要作用有：

• 提高访问速度：将内容分发到离用户更近的服务器上，减少网络延迟，提高用户访问网站的速度。
• 减轻源服务器压力：通过将请求分发到多个服务器上，减少源服务器的负载，提高网站的可用性和稳定性。
• 提高安全性：CDN 可以提供一些安全功能，如 DDoS 防护、SSL 加密等，保护源服务器和用户数据的安全。

2. 如果离用户最近的缓存服务器没有想要的资源，会怎么样

如果离用户最近的缓存服务器没有所需的资源，通常会发生以下情况：

• 向上级缓存服务器或源服务器请求资源：缓存服务器会检查其上级缓存服务器或直接向源服务器发送请求，以获取所需的资源。
• 可能引入延迟：如果需要从上级缓存服务器或源服务器获取资源，会增加网络延迟，因为数据需要经过更多的网络节点传输。
• 更新本地缓存：一旦获取到资源，缓存服务器会将其存储在本地缓存中，以便下次请求时可以更快地提供服务。

3、DNS 解析过程

• 浏览器缓存查询：当用户在浏览器中输入网址时，浏览器首先会在自己的缓存中查找是否有对应的 IP 地址记录。如果有，则直接使用该 IP 地址进行访问。
• 操作系统缓存查询：如果浏览器缓存中没有找到，浏览器会查询操作系统的缓存，看是否有对应的 IP 地址记录。
• 路由器缓存查询：如果操作系统缓存中也没有，会查询本地路由器的缓存。

• DNS 服务器查询

  ：如果以上缓存中都没有找到对应的 IP 地址，浏览器会向本地 DNS 服务器发送查询请求。本地 DNS 服务器通常由互联网服务提供商（ISP）提供。

  • 如果本地 DNS 服务器有该域名的缓存记录，则直接返回对应的 IP 地址。
  • 如果没有缓存记录，本地 DNS 服务器会向根域名服务器发送查询请求。根域名服务器会返回顶级域名服务器的地址。
  • 本地 DNS 服务器再向顶级域名服务器发送查询请求，顶级域名服务器返回权威域名服务器的地址。
  • 本地 DNS 服务器最后向权威域名服务器发送查询请求，权威域名服务器返回对应的 IP 地址。
• 结果返回：本地 DNS 服务器将查询到的 IP 地址返回给浏览器，浏览器使用该 IP 地址进行访问。

4、说一说 https，加密方式，数字证书包含哪些信息

• https

  • HTTPS（Hypertext Transfer Protocol Secure）是在 HTTP 基础上通过传输层安全（TLS）或安全套接层（SSL）进行加密的协议。它确保了在客户端和服务器之间传输的数据的保密性、完整性和真实性。

• 加密方式

  • 对称加密：通信双方使用相同的密钥进行加密和解密。优点是加密和解密速度快，效率高。缺点是密钥的分发和管理比较困难，如果密钥被泄露，整个通信就会被破解。
  • 非对称加密：使用一对密钥，即公钥和私钥。公钥可以公开，用于加密数据；私钥只有所有者知道，用于解密数据。非对称加密的优点是密钥管理相对容易，安全性高。缺点是加密和解密速度较慢。
  • HTTPS 结合了对称加密和非对称加密的优点。在建立连接时，使用非对称加密交换对称密钥，然后在后续的通信中使用对称加密进行数据传输。

• 数字证书包含的信息

  • 证书所有者的名称：通常是网站的域名或组织的名称。
  • 公钥：用于加密数据和验证数字签名。
  • 数字签名：由证书颁发机构（CA）使用私钥对证书的内容进行签名，用于验证证书的真实性和完整性。
  • 有效期：证书的有效时间范围。
  • 颁发机构信息：包括证书颁发机构的名称、数字签名等，用于验证证书的来源和可信度。

1. 基本数据类型

在前端开发中，常见的基本数据类型主要有以下几种：

• 数值类型：包括整数和浮点数。例如在 JavaScript 中，使用number类型来表示数值。可以进行算术运算，如加、减、乘、除等。
• 字符串类型：表示文本内容，用引号括起来。例如 “Hello World”。可以进行字符串拼接、查找子串等操作。
• 布尔类型：只有两个值，true和false。通常用于条件判断。
• 空值类型：在 JavaScript 中有null和undefined。null表示一个空对象指针，undefined表示未初始化的变量或没有返回值的函数的结果。

基本数据类型通常存储在栈内存中，占用空间较小，赋值操作是值的复制。

2. 为什么对象存堆中

对象存储在堆中主要有以下原因：

• 大小不固定：对象的大小可能在运行时动态变化，因为对象可以包含不同数量和类型的属性。堆内存可以灵活地分配不同大小的空间来存储对象。
• 生命周期灵活：对象的生命周期可以比函数调用的生命周期更长。在堆中存储对象可以让它们在需要时被多个地方引用，并且不会因为函数执行结束而立即被销毁。
• 共享和引用传递：多个变量可以指向同一个对象，通过在堆中存储对象，可以方便地实现对象的共享和引用传递。这样可以减少内存的重复占用，并提高代码的效率。

3. 数组和对象区别

• 数据结构：
• 数组是一种有序的数据集合，通过索引来访问元素。索引是从 0 开始的整数。
• 对象是一种无序的键值对集合，通过键来访问值。键可以是字符串或符号。
• 存储方式：
• 数组中的元素按顺序存储在连续的内存空间中。
• 对象的属性存储在哈希表中，通过键的哈希值来快速查找属性值。
• 用途：
• 数组适用于存储相同类型的元素，并且需要通过索引快速访问元素的情况。例如存储一组数字或字符串。
• 对象适用于存储不同类型的属性，并且需要通过键来访问属性值的情况。例如存储一个人的信息，包括姓名、年龄、性别等属性。

在 CSS 中，选择器是用来指定要应用样式的 HTML 元素的工具。不同的选择器有着不同的作用和用法，下面就来详细介绍一下~、>、+、[]、:和::这些选择器。

一、>选择器（子选择器）

>选择器用于选择指定元素的直接子元素。

div > p {
  color: blue;
}

在这个例子中，只有作为<div>直接子元素的<p>元素的文本颜色会被设置为蓝色。这意味着如果<p>元素被嵌套在其他元素中，而不是直接在<div>元素下，那么这个样式将不会被应用。

二、+选择器（相邻兄弟选择器）

+选择器用于选择紧接在指定元素后的第一个兄弟元素。

h1 + p {
  font-size: 18px;
}

在这个例子中，紧接在<h1>元素后面的第一个<p>元素的字体大小会被设置为 18 像素。如果有多个<p>元素紧接在<h1>元素后面，只有第一个<p>元素会受到影响。

三、~选择器（通用兄弟选择器）

~选择器用于选择指定元素之后的所有兄弟元素。

h2 ~ p {
  color: green;
}

在这个例子中，<h2>元素后面的所有<p>元素的文本颜色都会被设置为绿色。

四、[]选择器（属性选择器）

[]选择器根据元素的属性来选择元素。

input[type="text"] {
  border: 1px solid gray;
}

在这个例子中，所有type属性为text的<input>元素会有一个 1 像素宽的灰色边框。

还可以使用其他属性选择器的语法，如：

• [attribute^="value"]：选择属性值以指定值开头的元素。
• [attribute$="value"]：选择属性值以指定值结尾的元素。
• [attribute*="value"]：选择属性值包含指定值的元素。

五、:伪类选择器

伪类选择器用于选择处于特定状态的元素。

例如：

• :hover：选择鼠标悬停在其上的元素。
• :active：选择被激活（如被点击）的元素。
• :visited：选择被访问过的链接。
• :first-child：选择父元素的第一个子元素。
• :last-child：选择父元素的最后一个子元素。
• :nth-child(n)：选择父元素的第 n 个子元素。

六、::伪元素选择器

伪元素选择器用于选择元素的特定部分。

例如：

• ::before：在元素内容的前面插入内容。
• ::after：在元素内容的后面插入内容。
• ::first-letter：选择元素内容的第一个字母。
• ::first-line：选择元素内容的第一行。

用选择器实现二级分栏

1. HTML 结构：

   <div class="container">
       <div class="first-level">一级栏目 1</div>
       <div class="second-level">
           <div>二级栏目 1.1</div>
           <div>二级栏目 1.2</div>
       </div>
       <div class="first-level">一级栏目 2</div>
       <div class="second-level">
           <div>二级栏目 2.1</div>
           <div>二级栏目 2.2</div>
       </div>
   </div>

这里使用div元素创建了一个包含一级栏目和二级栏目的容器。每个一级栏目后面紧跟着对应的二级栏目。

2. CSS 样式：

  .container {
       display: flex;
       flex-wrap: wrap;
   }
  .first-level {
       width: 200px;
       background-color: #f0f0f0;
       padding: 10px;
   }
  .second-level {
       display: none;
       width: 200px;
       background-color: #e0e0e0;
       padding: 10px;
   }
  .first-level:hover +.second-level {
       display: block;
   }

通过 CSS 设置容器为弹性布局，一级栏目和二级栏目分别设置宽度和背景颜色。当鼠标悬停在一级栏目上时，显示对应的二级栏目。