面试 Vue 框架八股文十问十答第四期

面试 Vue 框架八股文十问十答第四期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

?点赞?收藏?不迷路！?

1） Vue 模板编译原理

Vue 的模板编译原理主要包括以下几个步骤：

• 模板解析： 将模板字符串解析成 AST（抽象语法树）。
• 优化静态内容： 遍历 AST，找到静态节点并标记，这样在更新时可以跳过静态节点的比对和更新。
• 生成渲染函数： 将 AST 转换为渲染函数，渲染函数是一个函数，它返回 VNode（虚拟节点）。
• 运行时渲染： 当组件的状态发生变化时，执行渲染函数生成新的 VNode，与旧的 VNode 进行比对，然后更新视图。

2）Vuex 的原理

Vuex 是 Vue.js 的状态管理库，其原理包括：

• State： 单一状态树，即应用的所有状态保存在一个对象中。
• Mutation： 更改状态的唯一途径是提交 mutation，它是一个包含 type 字符串的对象，通过 commit 方法提交。
• Action： Action 提交的是 mutation，而不是直接变更状态，可以包含异步操作。
• Getter： 允许组件从 Store 中获取状态，类似计算属性。

Vuex 将状态集中管理，通过一定的规则保证状态的一致性，使得状态的变更可追踪且易于调试。

3）Vuex 中 action 和 mutation 的区别

• Mutation： 用于同步修改状态的方法，直接改变状态。Mutation 是 Vuex 中的基本操作，但是它不能包含异步操作。
• Action： 用于提交 mutation，可以包含异步操作。Action 提交 Mutation，而不是直接更改状态。通过 Action 可以将异步逻辑和业务逻辑从组件中抽离，使得代码更清晰和可维护。

4）Vuex 和 localStorage 的区别

• Vuex： 是 Vue.js 的状态管理库，用于集中管理应用的状态。状态是响应式的，通过 mutation 修改，组件可以通过 getter 获取状态。主要用于管理组件之间共享的状态。
• localStorage： 是浏览器提供的本地存储机制，用于在浏览器端存储键值对。它是持久化的，数据存储在客户端，即使刷新页面或关闭浏览器仍然可以保留。

主要区别在于用途和作用范围。Vuex 用于管理应用的状态，而 localStorage 主要用于在浏览器端存储数据，它们解决了不同层面的问题。

5）对虚拟 DOM 的理解

虚拟 DOM（Virtual DOM）是一种编程概念，通常用于优化页面的渲染性能。

• 虚拟 DOM 是一个 JavaScript 对象： 它是真实 DOM 的轻量抽象，包含了真实 DOM 树的层次结构及其属性。
• DOM 操作开销大： 直接操作真实 DOM 可能会引起大量的重排和重绘，影响性能。
• 差异计算： 通过比较两个虚拟 DOM 树的差异，找出最小变更，然后只对真实 DOM 进行必要的更新，以提高性能。
• 框架使用虚拟 DOM： 许多前端框架（如React、Vue）使用虚拟 DOM 来实现高效的页面更新。

虚拟 DOM 提供了一种更高效的方式来管理页面的更新，通过差异计算和最小更新，减少了对真实 DOM 的频繁操作，提高了应用的性能

6）虚拟 DOM 就一定比真实 DOM 更快吗

当涉及虚拟 DOM 与真实 DOM 的速度对比时，情况并不是绝对的。虚拟 DOM 能在特定情况下提高性能，但并不总是比真实 DOM 更快。

• 虚拟 DOM 的优势：
  • 批量操作： 虚拟 DOM 可以批量更新，减少直接操作真实 DOM 时的重绘和重排。
  • 差异计算： 虚拟 DOM 通过 diff 算法比较差异，最小化真实 DOM 的更新。
  • 跨平台性： 可以在不同环境中使用，如服务器端渲染和本地渲染。
• 真实 DOM 的优势：
  • 简单： 直接操作真实 DOM 时，有时可以更快速和直接。
  • 小规模应用： 在小型应用中，直接操作真实 DOM 可能更为简单且性能良好。

7）虚拟 DOM 的解析过程

1. 创建虚拟 DOM 树： 将应用中的真实 DOM 结构转换为虚拟 DOM 树。
2. 更新虚拟 DOM： 当状态改变时，生成新的虚拟 DOM 树。
3. Diff 算法： 比较新旧虚拟 DOM 树，找到节点变化的部分。
4. 生成差异补丁： 根据差异生成补丁（Patch）。
5. 应用补丁到真实 DOM： 将补丁应用到真实 DOM 上，更新发生变化的部分。

8）DIFF 算法原理

Diff 算法是虚拟 DOM 实现性能优化的关键。其原理：

1. 同级比较： 只对比同层级节点，不会跨层级比较。
2. 节点类型比较： 首先比较节点类型，如果不同直接替换，不再深入比较子节点。
3. 节点属性比较： 对比节点属性，更新发生变化的属性。
4. 子节点比较： 对比子节点，采用递归方式继续比较。
5. 标记变化： 找出节点变化并标记，然后将这些变化更新到真实 DOM 上。

9）SSR 了解吗

SSR（Server-Side Rendering，服务器端渲染）是将 Vue 或 React 组件在服务器端预先渲染成 HTML，并将其发送给客户端，有利于 SEO、首屏加载性能等。通过在服务器上执行组件渲染，将渲染好的 HTML 作为初始页面返回给浏览器，加速页面加载。

10）hash路由和history路由实现原理说一下

• Hash 路由： 使用 URL 中的 hash（#）部分来作为路由的实现方式。当 hash 发生变化时，页面不会重新加载，而是触发 hashchange 事件，JavaScript 可以监听这个事件来实现路由变化。
• History 路由： 使用 HTML5 的 History API，如 pushState 和 replaceState，允许修改浏览器历史记录栈的条目而不引起页面刷新。当路由发生变化时，使用 History API 更新 URL，然后通过 popstate 事件来监听路由变化。

主要区别在于实现方式和对浏览器历史记录的管理，Hash 路由依赖于 URL 中的哈希部分，而 History 路由使用更现代的浏览器 API。