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