面试 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 的解析过程
- 创建虚拟 DOM 树： 将应用中的真实 DOM 结构转换为虚拟 DOM 树。
- 更新虚拟 DOM： 当状态改变时，生成新的虚拟 DOM 树。
- Diff 算法： 比较新旧虚拟 DOM 树，找到节点变化的部分。
- 生成差异补丁： 根据差异生成补丁（Patch）。
- 应用补丁到真实 DOM： 将补丁应用到真实 DOM 上，更新发生变化的部分。
8）DIFF 算法原理
Diff 算法是虚拟 DOM 实现性能优化的关键。其原理：
- 同级比较： 只对比同层级节点，不会跨层级比较。
- 节点类型比较： 首先比较节点类型，如果不同直接替换，不再深入比较子节点。
- 节点属性比较： 对比节点属性，更新发生变化的属性。
- 子节点比较： 对比子节点，采用递归方式继续比较。
- 标记变化： 找出节点变化并标记，然后将这些变化更新到真实 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。