面试 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。