vue口试宝典之二

发表于 2025-10-20 08:48:28

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

39.vue2和vue3中源码是怎样分析模版的

new vue（）的时间实例化了类之后根据传进去的option举行模版的范例div还是text还是啥举行匹配，同时拿到节点的值举行绑定，好比正则匹配{{}}将匹配到的变量拿去跟option中的data查找到具体的值在绑定在对应的html上
对于组件树则依照以下递归天生抽象语法树，然后再举行diff盘算举行更新
1. 分析阶段（Parse）

Vue2：

实现方式：利用递归降落分析器，通过正则表达式逐层分析模板字符串。
流程：
- 分词：利用正则匹配标署名、属性、文本内容。
- 构建AST节点：对每个元素创建 AST 节点，处置处罚指令（如 v-if）、插值（{{}}）。
- 层级嵌套：通过栈结构维护父级关系，分析子节点时递归调用。
关键方法：parseHTML 处置处罚字符串，parseStartTag 分析开始标签。

Vue3：

优化点：基于状态机的分析器，淘汰正则依靠，提拔性能。
流程：
- 逐字符扫描：直接遍历模板字符串，明显淘汰回溯斲丧。
- 动态标志：利用位运算纪录节点范例（如元素、插值、纯文本），加速后续处置处罚。
- 更多语法支持：直接处置处罚 <Teleport>、<Suspense> 等新特性。
关键改进：分析速率提拔约 40%，内存占用更少。

2. 优化阶段（Optimize）

Vue2：

静态标志：遍历全部 AST 节点，标志静态子树（无相应式依靠的节点）。
效果：static: true 标志，Diff 时跳过这些节点。
限定：仅跳过整个子树，嵌套动态节点时优化效果有限。

Vue3：

Block Tree 优化：
- Block节点：包裹动态内容，仅追踪内部动态子节点（如带 v-for、v-if 的节点）。
- PatchFlag 标志：在天生代码时为动态节点添加标志（如 TEXT、CLASS、PROPS），精准定位厘革点。
静态提拔（Hoisting） ：
- 将纯静态节点（如 `Hello 进步至渲染函数外部，克制重复创建。
- 效果：淘汰 VNode 创建开销，内存占用优化约 20%。

3. 代码天生（Generate）

Vue2：

天生代码：将 AST 转化为 createElement 调用嵌套结构的字符串。
示例代码：
1. _c('div', { attrs: { id: 'app' } }, [_v("Hello " + _s(name))])
复制代码
题目：全量天生 VNode，包罗静态节点。

Vue3：

按需天生：
- Block 树：动态节点按需天生更新逻辑，静态内容直接复用。
- PatchFlag 嵌入天生：基于动态标志天生针对性更新代码。
示例代码：
1. createBlock('div', { id: 'app' }, [
2. createVNode('span', null, _toDisplayString(name), PatchFlags.TEXT)
3. ])
复制代码
优化效果：渲染函数体积更小，运行更快。

4. 性能差别

编译速率：Vue3 模板编译比 Vue2 快约 2 倍（基准测试数据）。
运行时性能：初次渲染快 30%~50%，更新性能提拔 1.5~2 倍。
体积：Vue3 编译器天生的代码体积淘汰约 40%。

5. 新特性支持

Vue3 独有：
- 支持 <script setup> 编译时语法糖。
- 处置处罚 Fragments（多根节点）、Teleport 等结构的 AST 转换。
- 更风雅的编译时告诫（如未利用变量提示）。

总结

Vue2：基于正则和递归降落分析，天生较通用的渲染函数，静态优化有限。
Vue3：接纳逐字符扫描和 Block Tree，联合 PatchFlag，实现精准更新。编译时优化程度更高，直接提拔运行时性能。

40.vue中生命周期源码怎样实现

通过在vue类中写生命周期方法，在对应该实验的地方举行调用，当组件被实例化后按需求调用
41. Vue v-model 双向数据绑定的原理（口试版）

v-model 本质上是 数据绑定 (value) + 事故监听 (@input 或 @update:xxx) ，实现 数据和视图的双向同步。其工作原理在 Vue 2 和 Vue 3 略有差别：

Vue 2 原理：
- 依靠 Object.defineProperty() 举行数据挟制，监听 data 的 get/set。
- v-model 在表单元素上分析为 :value="data" + @input="data = $event.target.value"。挟制到v-model这个属性时对该属性绑定的元素举行试图更行，更新什么呢就须要通过Object.defineProperty()对数据的改变举行挟制然后去更新
- Watcher 监听数据厘革，触发 set 时更新视图，实现 Model → View。
- 视图厘革（用户输入）时，触发 input 事故，修改 data，实现 View → Model。
Vue 3 原理：
- 接纳 Proxy 署理 data，监听 get/set，提拔性能，支持深层相应式。
- v-model 分析为 :prop="data" + @update:prop="data = $event"，允许绑定多个 v-model 变量。
- Vue 3 引入 defineModel() 语法糖，简化组件 v-model 绑定，进步开辟体验。

焦点区别：

Vue 2 依靠 Object.defineProperty()，Vue 3 接纳 Proxy，性能更高。
Vue 3 允许 v-model 绑定多个变量，事故机制从 @input 改为 @update:xxx。
Vue 3 提供 defineModel() 语法糖，简化组件 v-model 绑定逻辑。

总结一句话：
Vue v-model 通过 数据绑定 + 事故监听 实现双向数据同步，Vue 2 依靠 Object.defineProperty() + input 事故，Vue 3 接纳 Proxy + update:xxx 事故，提供更强盛的数据绑定本领。
42.vue的diff算法

Vue 的 diff 算法用来高效更新 DOM，通过对新旧假造 DOM 树的差别对比，最小化真实 DOM 操纵。以下是其焦点机制和优化战略：
patch函数举行对比，h函数天生假造dom

1. 层级比力战略

同层级比力：只在同一父节点下递归比力子节点，跨层级的节点直接烧毁重修。
时间复杂度优化：将 O(n³) 的树对比复杂度降为 O(n)，恰当大部分场景。

2. 双端对比算法

通过 两端四个指针（旧头尾、新头尾） 渐渐缩小范围，优先处置处罚常见序次厘革（如头尾插入）：

头头对比：若旧头和新头为同一节点，直接复用，指针后移。
尾尾对比：若旧尾和新尾为同一节点，复用后指针前移。
旧头-新尾对比：若类似，将旧头节点移到旧尾之后，指针移动。
旧尾-新头对比：若类似，将旧尾节点移到旧头之前，指针移动。

若上述均不匹配，则通过 key 映射到旧节点数组查找。

3. Key 的作用

克制就地复用：通过唯一 key 标识节点身份，确保列表变更时（如排序、增删），Vue 能精准匹配节点，克制状态繁芜。若无 key，Vue 根据位置厘革复用节点，大概导致渲染题目（比方表单输入的错位）。

4. 剩余节点处置处罚

新旧节点列表遍历完成后：
- 旧列表剩余：删除多余 DOM。
- 新列表剩余：新增节点插入到精确位置。

5. 静态节点优化

编译阶段标志静态节点（无动态绑定），跳过其 diff 过程，淘汰对比次数。

6. 组件复用机制

类似范例的组件会通过 key 复用实例，触发更新而非烧毁重修，保存内部状态（如输入框内容）。

性能影响与最佳实践

公道利用 Key：在动态列表中，必填唯一且稳固的 key。
克制跨层级结构厘革：如 v-if 和 v-for 混用不妥大概导致组件重修。
利用 Keep-Alive：缓存不生动组件实例淘汰重复渲染。

示例场景

好比新旧子节点为 [A, B, C, D] 和 [A, D, B, C]：

头头对比（A=A）复用，指针后移。
新头 D 与旧头 B 不匹配，转双端对比：旧尾 D 与新头 D 匹配，将 D 移到 B 前。
继承处置处罚剩余节点，终极仅移动 D 一次而非重修。

通过上述战略，Vue 的 diff 算法以较低本钱完成高效更新，成为相应式体系的焦点优化本领。
43 vue2 和 vue3的diff算法区别

Vue 3 的 diff 算法在 Vue 2 的双端对比底子上，通过编译阶段的优化和更细粒度的动态追踪，明显淘汰了对比范围，团体性能更高。以下是焦点区别：

1. 编译优化低落 Diff 范围

静态提拔（Hoist Static） ：
将纯静态的节点/属性提拔到渲染函数外，天生一次后复用，不再到场每次 Diff。
区块树（Block Tree） ：
- 以「动态节点」为根的树结构（Block）将模板分别为动态区块，更新时只需遍历动态内容，静态部分直接跳过。
- 层级更扁平，淘汰「跨层级移动」的误判。

2. Patch Flags 精准对比属性

在编译阶段对动态节点标志 PatchFlag（如 TEXT、CLASS、PROPS），Diff 时直接根据标志仅对比厘革的属性。比方：

// 编译生成的代码片段（示意）
createVNode("div", {
class: _normalizeClass({ active: isActive }),
style: _normalizeStyle({ color: userColor })
}, null, 12 /* CLASS | STYLE */)

复制代码

此处 12 表现须要查抄 class 和 style，其他属性忽略。

3. 缓存优化淘汰对比次数

事故缓存（Cache Handler） ：
若事故绑定为内联函数（如 @click="handleClick"），Vue 3 主动缓存函数，克制触发子组件偶然义更新。
动态节点缓存：
同一模板中的动态内容（如 v-if/v-else）复用已创建的节点，淘汰烧毁重修。

4. 双端对比的优化调解

Vue 3 保存了双端对比，但联合动态标志优化流程：

头尾对比服从更高，因 PatchFlag 可快速跳过类似节点。
对仅文本厘革等场景直接更新，无需递归子节点。
对有 key 的列表，优先复用类似 key 节点，跨层级移动更精确。

5. 相应式优化淘汰触发 Diff

Vue 3 利用 Proxy 更换 Object.defineProperty，克制了全量递归相应式初始化。
依靠追踪更细粒度，非须要的数据厘革不会触发组件重新渲染。

性能对比示例

假设一个列表更新场景：

Vue 2：需遍历全部子节点，通过双端对比找出差别。
Vue 3：通过 Block Tree 仅对比动态部分，联合 PatchFlag 快速定位文本或属性厘革，路径更短。

总结区别

特性Vue 2Vue 3静态内容处置处罚全量对比提拔并跳过，不到场 Diff动态对比粒度节点级别属性级别（通过 PatchFlag）列表更新双端对比为主，大概误判跨层级移动Block 树优化，淘汰多余操纵事故处置处罚器每次触发更新主动缓存，克制子组件更新相应式影响 Diff触发全量对比更精准的依靠网络，淘汰不须要更新

最佳实践

公道利用 key：清楚标识动态列表项，克制复用题目。
克制深层嵌套：利用 Vue 3 的 Block Tree 特性淘汰对比深度。
淘汰不须要的动态绑定：静态内容只管保持轻便，以触发静态提拔。

通过编译时优化和运行时战略的联合，Vue 3 的 Diff 算法在大多数场景下的性能显着优于 Vue 2，尤其实用于大型动态应用。
44.vue和react 的假造dom有和区别，以及各自的diff算法的区别

Vue 与 React 的假造 DOM 及 Diff 算法对比

一、假造 DOM 的焦点区别

特性VueReact天生方式基于模板编译，编译时优化显着（如静态提拔、区块标志）基于 JSX 天生通例假造 DOM 树，依靠运行时优化节点标志通过 PatchFlag 标志动态内容（如属性/文本厘革），精确追踪变更无内置动态标志机制，需全量对比节点静态优化静态节点提拔为常量，直接复用，无需 Diff在最新版本中引入 react/compiler-runtime（实验性）实验静态优化相应式机制影响共同依靠追踪，精准判断组件更新范围依靠状态变更手动触发组件重渲染，大概需 memo 或 PureComponent 优化

二、Diff 算法战略对比

1. Vue 的 Diff 算法

双端对比 + 动态标志：
- 首尾四指针对比，处置处罚常见序次变更（如头部插入、尾部删除）。
- 编译时对动态内容标志 PatchFlag，低落对比粒度（如仅查抄 class 或 style）。
Block Tree 优化：
- 将动态内容分别为 Block（区块），更新时仅遍历动态区块，跳过静态内容。
- 列表对比时复用带 key 的节点，淘汰跨层级移动。
上风：恰当模板驱动的场景，编译优化明显淘汰无效对比，高效处置处罚局部更新。

2. React 的 Diff 算法

传统 Diff 战略（React 16 前）：
- 逐层递归，同层级按索引对比。若元素范例差别，直接卸载重修。
- 对列表利用 key 优化，基于 key 匹配旧节点，淘汰位置变更时的性能消耗。
Fiber 架构优化（React 16+）：
- 将 Diff 过程拆分为可停止的链表遍历，支持优先级调治和异步渲染。
- 修复了深度优先递归大概导致的主线程壅闭题目。
上风：更恰当须要风雅化控制渲染过程的应用（如复杂动画交互），但在动态列表中央插入时性能本钱较高。

三、Key 的作用与差别

框架无 Key 时的举动有 Key 时的优化战略Vue根据节点范例及序次实验就地复用，大概导致状态繁芜（如输入框错位）精准匹配类似 Key 的节点，跨层级移动时复用 DOM 并保持状态React同类节点按索引直接复用，大概误判更新通过 Key 标识同一节点，克制不须要的烧毁重修

四、性能场景对比

列表中央插入：
- Vue：双端对比 + Block Tree 快速定位插入点，仅移动相邻节点。
- React：默认按索引对比，大概导致大量节点向后位移，性能消耗较大（需依靠 Key 优化）。
静态内容更新：
- Vue：跳过静态区块的对比（编译时优化）。
- React：需手动用 memo 跳过或依靠实验性编译优化。

五、总结与选型发起

框架实用场景优化方向Vue模板驱动、局部更新频仍的应用（如CMS、表单工具）依靠内置编译优化，恰当快速开辟，无需手动优化React复杂交互、需风雅调治渲染的应用（如大型SPA、动画）需联合 memo、useCallback 或 Fiber 调治优化

示例代码对比：

// React 列表渲染（依赖 key 优化）
{items.map((item) => (
<div key={item.id}>{item.text}</div>
))}
// Vue 列表渲染（key + v-for）
<div v-for="item in items" :key="item.id">{{ item.text }}</div>

复制代码

焦点差别：
Vue 的假造 DOM 和 Diff 通过编译阶段提前优化（如静态提拔、区块标志），运行时仅处置处罚动态部分；
React 则依靠运行时战略 + 组件级优化，通过 Fiber 架构实现可停止的异步渲染，恰当复杂调治场景。
45.v-for 的key 有什么作用

v-for 的 key 有什么作用？（口试版）

1. key 的作用

key 的告急作用是唯一标识列表中的每个节点，资助 Vue 在举行 DOM Diff 时更高效地更新视图。
2. key 的作用机制

优化 Diff 过程：Vue 通过 key 辨认元素是否复用或须要重新渲染，克制不须要的 DOM 操纵，进步性能。
保持组件状态：如果不利用 key，Vue 大概会错误复用组件，导致状态繁芜。
克制渲染非常：当 key 不唯一或缺失时，大概导致列表更新时数据错位。

3. key 的 Diff 影响

Vue 接纳双端 Diff 算法，如果 key 唯一且稳固：

只修改须要的节点，不重新创建整个列表，优化渲染性能。
如果 key 不唯一或缺失，Vue 大概利用错误的复用战略，导致错误更新或频仍烧毁重修。

4. 示例：key 影响列表更新

❌ 错误示例（缺少 key）

<li v-for="item in list">{{ item.text }}</li>

复制代码

Vue 大概错误复用旧节点，导致渲染繁芜。
✅ 精确示例（利用 key）

<li v-for="item in list" :key="item.id">{{ item.text }}</li>

复制代码

Vue 辨认 id 厘革，仅更新须要部分，保持性能最佳。
5. key 的最佳实践

key 应该是唯一且稳固的 ID（如数据库 id）。
克制利用索引 index 作为 key，由于索引厘革会导致错误复用，影响渲染：
1. <li v-for="(item, index) in list" :key="index">{{ item.text }}</li>
复制代码
⚠️ 如果列表有新增/删除，索引会变更，导致 Vue 误判，影响性能或导致错误 UI 厘革。

6. 结论

✅ key 的作用是优化 Diff 算法，进步列表更新服从，克制错误复用，确保渲染精确！
口试时可以如许总结：
“key 在 v-for 中用于唯一标识节点，资助 Vue 更高效地举行 Diff 运算，克制不须要的 DOM 变更，进步渲染性能，同时确保组件状态精确复用。”
46.vue中的修饰符有哪些

Vue 中的修饰符（口试版）

Vue 提供 指令修饰符（Modifiers） ，用于 增强事故、指令和表单绑定的功能，以更轻便的方式处置处罚逻辑。

1. 事故修饰符

作用：防止默认举动、克制事故冒泡、事故绑定控制等。
修饰符作用.stop克制事故冒泡 (event.stopPropagation()).prevent克制默认举动 (event.preventDefault()).capture利用事故捕获模式 (addEventListener 的 { capture: true }).self仅触发绑定事故的元素自己（不冒泡）.once事故只触发一次.passive进步滚动性能 ({ passive: true }，不能与 .prevent 一起用)示例：

<button @click.stop="handleClick">阻止冒泡</button>
<form @submit.prevent="submitForm">阻止默认提交</form>
<div @click.capture="log">使用捕获模式</div>

复制代码

2. 按键修饰符

作用：只在特定按键触发事故。
修饰符作用.enterEnter 键.tabTab 键.deleteDelete/Backspace 键.escEscape 键.space空格键.up .down .left .right方向键.exact只在指定按键组合触发示例：

<input @keyup.enter="search">
<input @keyup.delete="deleteItem">
<input @keydown.ctrl.enter="submit">
<button @click.ctrl.exact="onlyCtrlClick">仅 Ctrl 生效</button>

复制代码

3. 鼠标修饰符

作用：限定鼠标事故。
修饰符作用.left仅限左键点击.right仅限右键点击.middle仅限鼠标中键示例：

<button @click.right="showMenu">右键点击</button>

复制代码

4. 表单修饰符

作用：优化表单输入体验。
修饰符作用.lazy失去焦点时（change 事故）更新数据.number主动转换输入值为 Number 范例.trim主动去除输入首尾空格示例：

<input v-model.lazy="name">
<input v-model.number="age">
<input v-model.trim="email">

复制代码

5. v-bind 修饰符

作用：控制属性的动态绑定举动。
修饰符作用.prop绑定 DOM 原生属性 (el.propName = value).camel实用于 SVG，将 kebab-case 转 camelCase示例：

<div v-bind:innerHTML.prop="rawHtml"></div>
<svg v-bind:viewBox.camel="viewBoxValue"></svg>

复制代码

6. v-on 修饰符

作用：监听原生事故。
修饰符作用.native监听原生事故（用于 v-on 组件事故）示例：

<custom-button @click.native="handleClick"></custom-button>

复制代码

7. v-model 修饰符（Vue 2 & Vue 3）

Vue 2

<input v-model.lazy="message">
<input v-model.number="age">
<input v-model.trim="email">

复制代码

Vue 3

修饰符作用.lazy失去焦点后更新数据.number主动转换为 Number.trim主动去空格.capitalizeVue 3 自界说修饰符示例（手动实现）Vue 3 允许自界说 v-model 修饰符：

<Child v-model.capitalize="text" />

复制代码

子组件：

<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value.toUpperCase())">
</template>
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

复制代码

总结（口试时的回复）

Vue 修饰符告急用于优化事故监听、表单绑定和属性动态绑定，提拔代码可读性和性能。常见的修饰符包罗：

事故修饰符（.stop、.prevent、.once 等）优化事故举动，克制额外 DOM 操纵。
按键修饰符（.enter、.esc 等）进步键盘事故的精准控制。
鼠标修饰符（.left、.right 等）限定鼠标事故范例。
表单修饰符（.lazy、.number、.trim）优化 v-model 绑定命据的方式。
v-bind 修饰符（.prop、.camel）优化动态属性的绑定方式。
v-on 修饰符（.native）用于监听组件的原生事故。

口试官大概会问：
“为什么 v-for 遍历时要加 key？”
你可以增补：
“v-for 的 key 不是修饰符，但它用于优化 Vue 的 Diff 算法，淘汰不须要的 DOM 变更，进步渲染性能，克制状态繁芜。” 😊
47.怎样办理革新后二次加载路由？什么是革新后二次加载路由

什么是“革新后二次加载路由”？

革新后二次加载路由，指的是在 Vue 项目中，用户革新页面后，路由会重新分析并加载，但由于某些缘故原由（如异步路由、权限控制、动态添加路由等），导致路由数据丢失或须要二次加载，乃至页面 404 或白屏的题目。
这种环境通常发生在：

动态路由未恒久化（如基于权限的 addRoute() 添加路由）。
Vuex/Pinia 状态丢失（状态管理库默认存储在内存中，革新后丢失）。
路由模式题目（history 模式大概导致找不到路由）。
后端路由权限控制（须要重新哀求路由数据）。

怎样办理革新后二次加载路由？

根据题目的成因，常见的办理方案如下：

1. 恒久化动态路由

题目

如果路由是动态添加的（如基于用户权限 router.addRoute()），革新后 Vue Router 会重置，导致 动态路由丢失。
办理方案

革新时，从当地存储获取权限信息，重新添加路由
确保在路由守卫（beforeEach）中举办法态加载

示例：动态路由恒久化

// src/router/index.ts
import router from './index';
import { getUserRoutes } from '@/api/user'; // 模拟后端返回的动态路由数据
import { useUserStore } from '@/store/user';
export async function setupDynamicRoutes() {
const userStore = useUserStore();
const savedRoutes = localStorage.getItem('userRoutes');
// 如果 Vuex/Pinia 中没有路由，尝试从本地存储恢复
if (!userStore.routes.length && savedRoutes) {
userStore.setRoutes(JSON.parse(savedRoutes));
}
// 遍历动态路由并添加
userStore.routes.forEach(route => {
router.addRoute(route);
});
}
// 组件挂载时调用
setupDynamicRoutes();

复制代码

原理

革新时，从当地存储获取权限数据
在 beforeEach 守卫或 setupDynamicRoutes 里动态添加路由
确保动态路由不会因革新而丢失

2. 恒久化 Vuex/Pinia 数据

题目

Vuex/Pinia 状态默认存储在内存中，革新后会丢失数据，导致依靠 Vuex/Pinia 存储的权限、用户信息、动态路由丢失。
办理方案

利用 localStorage / sessionStorage / pinia-plugin-persistedstate 恒久化数据。
示例：Pinia 恒久化

import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({
routes: []
}),
actions: {
setRoutes(newRoutes) {
this.routes = newRoutes;
localStorage.setItem('userRoutes', JSON.stringify(newRoutes));
}
},
persist: true // 持久化存储
});

复制代码

原理

恒久化 routes 数据，克制革新后丢失
共同动态路由，在 setupDynamicRoutes 里重新加载

3. 确保后端权限数据提前加载

题目

如果权限路由是从后端获取的，但 Vue Router 先初始化，大概会导致页面加载时找不到匹配路由，出现 404。
办理方案

路由初始化前，先获取用户权限和路由信息
利用 beforeEach 守卫拦截并期待权限加载完成

示例

router.beforeEach(async (to, from, next) => {
const userStore = useUserStore();
if (!userStore.routes.length) {
// 获取用户权限 & 路由信息
await userStore.fetchUserRoutes();
setupDynamicRoutes(); // 重新添加动态路由
next({ ...to, replace: true }); // 重新导航，确保新路由生效
} else {
next();
}
});

复制代码

原理

革新后，如果 userStore.routes 为空，重新哀求后端路由数据
动态注册后，next({ ...to, replace: true }) 重新跳转，克制 404
确保路由加载完毕后，才进入页面

4. history 模式导致的 404 题目

题目

如果 Vue Router 利用 history 模式，直接在欣赏器输入 URL 大概导致 服务器找不到该路由，返回 404。
办理方案

后端须要设置 fallback 规则，全部哀求都返回 index.html
Vue Router 可利用 hash 模式，克制服务器找不到路径

Nginx 设置示例

location / {
try_files $uri /index.html;
}

复制代码

Vue Router 变更为 hash 模式

const router = createRouter({
history: createWebHashHistory(), // 改用 hash 模式
routes
});

复制代码

5. 路由懒加载，克制二次加载

题目

如果 Vue 接纳懒加载路由，但没有精确处置处罚异步路由，大概导致 革新后部分路由二次加载，影响用户体验。
办理方案

确保 import() 路由时，共同动态注册
克制 beforeEach 里重复实验 addRoute

示例

const routes = [
{
path: '/',
component: () => import('@/views/Home.vue') // 懒加载
},
{
path: '/dashboard',
component: () => import('@/views/Dashboard.vue')
}
];
const router = createRouter({
history: createWebHistory(),
routes
});

复制代码

克制二次加载：

router.beforeEach(async (to, from, next) => {
if (!router.hasRoute(to.name)) {
await setupDynamicRoutes(); // 确保只添加一次
next({ ...to, replace: true });
} else {
next();
}
});

复制代码

总结（口试版回复）

革新后二次加载路由，通常是由于动态路由未恒久化、Vuex/Pinia 状态丢失、后端路由未提前加载或 history 模式 404 导致的。
办理方案包罗：

恒久化动态路由，革新时重新 addRoute()
恒久化 Vuex/Pinia 数据，克制状态丢失
确保后端权限数据提前加载，在 beforeEach 里拦截处置处罚
克制 history 模式 404，通过 Nginx 设置 try_files
精确利用路由懒加载，克制二次 addRoute()

48.vuex革新数据会丢失吗？怎么办理？

Vuex 革新数据会丢失吗？为什么？

❌ 是的，Vuex 数据会在页面革新后丢失

缘故原由：Vuex 的数据存储在 内存（RAM） 中，而 页面革新会导致整个 Vue 实例重新初始化，Vuex 也会被重置，导致数据丢失。
🔥 办理方案（口试高频回复）

办理 Vuex 革新数据丢失的题目，告急有 3 种方式：

✅ 方案 1：利用 localStorage / sessionStorage 恒久化

原理：在 Vuex mutation 中存储数据到 localStorage/sessionStorage，革新后 从当地存储规复 Vuex 状态。
示例

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
userInfo: JSON.parse(localStorage.getItem('userInfo')) || {} // 先从本地存储恢复数据
},
mutations: {
setUser(state, user) {
state.userInfo = user;
localStorage.setItem('userInfo', JSON.stringify(user)); // 存储到 localStorage
}
}
});

复制代码

📌 方案分析

✅ 长处：简单、兼容性好，实用于小型项目
❌ 缺点：只能存储根本数据范例，无法存储复杂对象（如 Vue 组件实例）

✅ 方案 2：利用 vuex-persistedstate

原理：vuex-persistedstate 是一个插件，主动同步 Vuex 状态到 localStorage/sessionStorage，无需手动操纵。
安装

npm install vuex-persistedstate

复制代码

利用

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
token: '',
userInfo: {}
},
mutations: {
setToken(state, token) {
state.token = token;
},
setUserInfo(state, userInfo) {
state.userInfo = userInfo;
}
},
plugins: [createPersistedState()] // 添加插件
});

复制代码

📌 方案分析

✅ 长处：

无需手动操纵 localStorage，主动恒久化
支持多个 state 存储
可设置存储方式（sessionStorage、localStorage）

❌ 缺点：

大概会影响性能（恒久化大数据对象时）
存储到 localStorage 的数据是明文，敏感数据（如 Token）须要加密

✅ 方案 3：利用 Pinia（Vue 3 保举）

Vue 3 官方保举利用 Pinia 作为 Vuex 的更换方案，它 默认支持恒久化存储。
安装

npm install pinia

复制代码

利用

import { defineStore } from 'pinia';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
// 创建 Pinia 实例
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
// 创建 store
export const useUserStore = defineStore('user', {
state: () => ({
token: '',
userInfo: {}
}),
actions: {
setToken(token) {
this.token = token;
},
setUserInfo(userInfo) {
this.userInfo = userInfo;
}
},
persist: true // 直接开启持久化
});

复制代码

Vue 3 项目中，Pinia 是更保举的状态管理方案！

🔍 总结（口试最佳回复）

Vuex 革新后数据会丢失，由于它存储在内存中，页面革新会重新初始化 Vuex 状态。
办理方案包罗： 1️⃣ 利用 localStorage/sessionStorage 恒久化 Vuex 数据 2️⃣ 利用 vuex-persistedstate 插件，主动存储和规复 Vuex 状态 3️⃣ 在 Vue 3 中，利用 Pinia（官方保举），并开启 persist 恒久化
💡 口试官追问：哪种方案更保举？
小型项目可用 localStorage，大型项目保举 vuex-persistedstate，Vue 3 直接用 Pinia，更轻量、性能更优。 🚀
49.computed和watch的区别？

💡 computed 和 watch 的区别（口试高频考点）

在 Vue 中，computed 和 watch 都可以用于监听数据厘革，但它们的应用场景和工作原理差别。

✅ 1. 焦点区别

对比点computed 盘算属性watch 侦听器触发方式依靠的值厘革时主动更新手动监听某个值的厘革是否有缓存✅ 有缓存，依靠值稳固时不会重新盘算❌ 无缓存，值厘革时总会实验实用场景值是基于其他值盘算而来（如数据派生、格式化）实验异步操纵、副作用操纵（如 API 哀求、手动控制逻辑）返回值必须返回一个值（getter 情势）可以实验方法，不愿定有返回值

✅ 2. computed（盘算属性）—— 实用于数据派生

特点：

基于依靠数据主动盘算，如果依靠的数据稳固，则不会重复盘算（有缓存）。
实用于 盘算值、数据格式化、依靠多个数据的盘算。

🌟 示例 1：computed 实现数据派生

<script setup>
import { ref, computed } from "vue";
const firstName = ref("张");
const lastName = ref("三");
// 计算属性：拼接全名
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>
<template>
<p>姓名：{{ fullName }}</p>
</template>

复制代码

💡 关键点

✅ fullName 依靠于 firstName 和 lastName，当此中一个厘革时，computed 只会重新盘算一次。
✅ 有缓存，如果 firstName 和 lastName 没变，则不会重复实验盘算。

✅ 3. watch（侦听器）—— 实用于副作用

特点：

监听数据厘革后实验函数（无缓存）。
实用于异步操纵（如 API 哀求）或手动控制逻辑。

🌟 示例 2：watch 监听数据厘革，实验异步哀求

<script setup>
import { ref, watch } from "vue";
const keyword = ref("Vue");
// 监听 keyword 变化，触发 API 请求
watch(keyword, async (newVal, oldVal) => {
console.log(`搜索关键词变化：${oldVal} → ${newVal}`);
await fetch(`https://api.example.com/search?q=${newVal}`);
});
</script>
<template>
<input v-model="keyword" placeholder="输入关键词" />
</template>

复制代码

💡 关键点

✅ 监听 keyword 厘革后，实验 API 哀求（副作用）。
❌ 无缓存，每次 keyword 厘革都会触发 watch 逻辑。
🚀 实用于异步哀求、定时器、手动控制逻辑等。

✅ 4. 什么时间用 computed，什么时间用 watch？

场景用 computed ✅用 watch ✅盘算派生数据（如格式化、拼接）✅❌监听数据厘革并触发 API 哀求❌✅监听多个数据厘革并实验逻辑❌✅依靠数据稳固时，渴望缓存效果✅❌处置处罚异步操纵（如 setTimeout、fetch）❌✅

✅ 5. watchEffect vs watch

Vue 3 还提供了 watchEffect，它是 watch 的增强版，主动网络依靠，不消手动指定监听变量。
🌟 示例 3：watchEffect 主动网络依靠

<script setup>
import { ref, watchEffect } from "vue";
const count = ref(0);
watchEffect(() => {
console.log(`count 变化了：${count.value}`);
});
</script>
<template>
<button @click="count++">增加</button>
</template>

复制代码

💡 watchEffect 实用场景

主动网络依靠，不消手动指定监听值
恰当处置处罚副作用（如订阅数据、监听多个变量）

✅ 6. 口试最佳回复

computed vs watch 的区别？

computed 实用于盘算派生数据，基于依靠厘革主动更新，而且有缓存。
watch 实用于监听数据厘革，实验副作用操纵（如 API 哀求、定时器） ，无缓存。
Vue 3 另有 watchEffect，主动网络依靠，实用于全局监听副作用。

🔥 总结

✅ computed 实用于盘算派生数据（有缓存）。
✅ watch 实用于监听数据厘革并实验副作用（无缓存）。
✅ Vue 3 watchEffect 实用于主动网络依靠的副作用。

👉 口试官大概追问：

computed 什么时间触发？
- 依靠的数据厘革时才会触发，而且有缓存，不会重复盘算。
computed 和 watch 的性能对比？
- computed 性能更好，由于它有缓存，只有依靠厘革时才会重新盘算。
- watch 每次值变更都会触发回调，大概导致不须要的盘算。

50. vuex在什么场景会去利用？属性有哪些？

🔥 Vuex 利用场景及焦点属性（口试高频考点）

Vuex 是 Vue 2 官方保举的全局状态管理库，实用于多个组件共享状态的场景。在 Vue 3 中，Vuex 渐渐被 Pinia 代替，但仍旧在很多 Vue 2 项目中广泛利用。

✅ 1. Vuex 实用场景

📌 什么时间应该利用 Vuex？

Vuex 实用于多个组件之间须要共享状态的环境，好比：

用户登录信息管理（如 token、userInfo）
购物车数据管理（多个组件共享购物车数据）
权限控制（差别脚色展示差别页面）
跨组件通讯（克制 props 转达层级过深）
缓存数据，克制重复哀求（如分页数据、搜索效果）

🌟 示例：Vuex 实用于全局用户状态管理

const store = new Vuex.Store({
state: {
userInfo: null
},
mutations: {
setUser(state, user) {
state.userInfo = user;
}
}
});

复制代码

📌 场景： 当 userInfo 须要在多个组件（如 Navbar、Profile、Settings）中共享时，Vuex 是最佳选择。

✅ 2. Vuex 焦点属性

Vuex 由 五个焦点属性 构成：state、getters、mutations、actions、modules。
属性作用state存储全局状态（如用户信息、购物车数据）getters从 state 派生数据（类似 computed）mutations同步修改 state（唯一能直接改 state 的方式）actions异步操纵（如 API 哀求，然后提交 mutations 修改 state）modules模块化 Vuex，实用于大型项目

✅ 3. Vuex 具体示例

📌 state（存储全局状态）

const store = new Vuex.Store({
state: {
userInfo: { name: "张三", role: "admin" }
}
});

复制代码

作用：会合存储全局数据，多个组件可以共享。

📌 getters（从 state 派生数据，类似 computed）

const store = new Vuex.Store({
state: {
cart: [{ id: 1, name: "苹果", price: 5 }, { id: 2, name: "香蕉", price: 3 }]
},
getters: {
totalPrice: state => state.cart.reduce((sum, item) => sum + item.price, 0)
}
});

复制代码

利用：

<p>总价：{{ $store.getters.totalPrice }}</p>

复制代码

作用：对 state 举行盘算，不会修改 state 自己。
类似 computed，如果 state 没变，getters 也不会重新盘算（有缓存）。

📌 mutations（唯一修改 state 的方式，必须同步）

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state, payload) {
state.count += payload;
}
}
});

复制代码

利用：

<button @click="$store.commit('increment', 5)">增加 5</button>

复制代码

作用：修改 state，必须是同步的。
参数 payload：可以转达额外参数（如 5）。

📌 actions（处置处罚异步逻辑，提交 mutations 修改 state）

const store = new Vuex.Store({
state: {
userInfo: null
},
mutations: {
setUser(state, user) {
state.userInfo = user;
}
},
actions: {
async fetchUser({ commit }) {
const user = await fetch("/api/user").then(res => res.json());
commit("setUser", user);
}
}
});

复制代码

利用：

<button @click="$store.dispatch('fetchUser')">获取用户信息</button>

复制代码

作用：用于处置处罚异步哀求，然后提交 mutations 修改 state。
必须用 dispatch 调用（不能用 commit）。

📌 modules（模块化 Vuex，实用于大型项目）

const userModule = {
state: { userInfo: null },
mutations: { setUser(state, user) { state.userInfo = user; } }
};
const store = new Vuex.Store({
modules: {
user: userModule
}
});

复制代码

利用：

<p>用户：{{ $store.state.user.userInfo }}</p>

复制代码

作用：将 Vuex 按功能拆分多个模块，便于管理。

✅ 4. 口试最佳回复

Vuex 实用于多个组件共享状态的场景，比方用户信息、购物车数据、权限控制等。
Vuex 有 5 个焦点属性：

state：存储全局数据
getters：从 state 盘算派生数据（类似 computed）
mutations：唯一修改 state 的方法（必须同步）
actions：用于实验异步操纵（如 API 哀求）
modules：模块化 Vuex，实用于大型项目

✅ 5. Vue3 还适实用 Vuex 吗？

🚀 Vue3 保举利用 Pinia 代替 Vuex，由于：

Pinia 更轻量（API 更简单）
默认支持恒久化存储
支持 TypeScript 更友好
支持更好的开辟体验（Devtools）

如果是新项目，发起直接用 Pinia！ 🎯

🎯 总结

题目答案Vuex 实用于什么场景？多个组件共享状态，如用户信息、购物车、权限管理等。Vuex 的焦点属性有哪些？state、getters、mutations、actions、modules。mutations 和 actions 的区别？mutations 只能同步，actions 可以异步。Vue 3 还用 Vuex 吗？保举用 Pinia，更轻量、性能更好。51. vue和jquery的区别是什么？

🔥 Vue 和 jQuery 的区别（口试高频考点）

Vue 和 jQuery 是两种完全差别的前端开辟方式，告急表如今 编程范式、数据驱动方式、组件化开辟、性能优化等方面。口试中，把握它们的焦点区别，能让你更有竞争力！💪🚀

✅ 1. Vue vs jQuery 的焦点区别

对比点Vue（当代框架）jQuery（传统库）编程范式声明式（数据驱动）下令式（操纵 DOM）焦点头脑数据驱动视图，只须要修改数据，Vue 会主动更新 DOM手动操纵 DOM，通过 jQuery 选择器查找元素然后修改组件化开辟✅ 支持（复用组件，进步开辟服从）❌ 不支持（只能拆分 HTML 片断）数据绑定✅ 双向数据绑定 (v-model)❌ 无双向绑定，须要手动 $('#id').val() 获取值事故绑定✅ 指令方式（@click="fn"） ，主动解绑❌ 手动绑定（$('button').click(fn)） ，需手动解绑性能优化✅ 假造 DOM + Diff 算法，只更新变更部分❌ 直接操纵 DOM，性能较差实用场景SPA（单页面应用）、组件化开辟、大型项目简单的 DOM 操纵、老项目维护、小型项目状态管理✅ Vuex / Pinia 举行全局状态管理❌ 无状态管理，依靠全局变量

✅ 2. Vue vs jQuery 代码对比

🌟 场景：点击按钮修改文本内容

🔥 Vue 实现（数据驱动）

<template>
<div>
<p>{{ message }}</p>
<button @click="changeMessage">点击修改</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref("Hello Vue!");
const changeMessage = () => {
message.value = "Vue 是数据驱动的！";
};
</script>

复制代码

✅ 数据驱动，message 厘革，Vue 主动更新视图，无需手动操纵 DOM。
✅ Vue 主动管理事故绑定息争绑，不会出现内存走漏。

🔥 jQuery 实现（手动操纵 DOM）

<p id="text">Hello jQuery!</p>
<button id="btn">点击修改</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#btn").click(function () {
$("#text").text("jQuery 直接操作 DOM！");
});
</script>

复制代码

❌ 手动操纵 DOM，须要 $('#text').text("xxx") 直接修改。
❌ 须要手动解绑事故，否则大概会导致 内存走漏。

✅ 3. Vue 的上风

组件化开辟 🧩
- Vue 支持组件拆分，进步代码复用率，而 jQuery 只能通过 HTML 片断拼接。
数据驱动 ⚡
- Vue 主动管理 DOM 更新，只须要修改数据，而 jQuery 须要手动操纵 DOM。
双向数据绑定 🔄
- Vue 通过 v-model 实现数据和 UI 双向绑定，jQuery 须要手动获取和更新值。
性能优化 🚀
- Vue 利用假造 DOM + Diff 算法，只更新变更部分，jQuery 直接修改 DOM，性能较差。
相应式开辟 📡
- Vue 内置相应式体系（ref、reactive），jQuery 只能通过事故监听厘革。

✅ 4. jQuery 什么时间还会被用到？

固然 Vue 是当代框架，但 jQuery 仍旧有一些实用场景：

老项目维护：很多老体系仍旧利用 jQuery，Vue 迁移本钱较高。
简单的 DOM 操纵：如果只是少量的动态效果（如轮播图、动画），jQuery 更轻量。
插件生态：jQuery 仍旧有很多插件（如 DataTables、Swiper）实用于特定需求。

💡 但如果是新项目，Vue 是更好的选择！

✅ 5. 口试最佳回复

Vue 和 jQuery 的焦点区别在于：

Vue 是 声明式开辟（数据驱动视图），而 jQuery 是 下令式开辟（手动操纵 DOM）。
Vue 支持组件化、双向数据绑定、假造 DOM，实用于大型项目和 SPA。
jQuery 告急用于简单的 DOM 操纵、老项目维护，但不恰当复杂应用。

🎯 总结

对比点Vue（当代框架）jQuery（传统库）编程方式声明式编程（数据驱动）下令式编程（手动操纵 DOM）实用场景SPA、组件化开辟、大型项目简单 DOM 操纵、老项目维护组件化✅ 支持❌ 不支持数据绑定✅ 双向绑定 (v-model)❌ 手动更新事故管理✅ 主动绑定解绑❌ 需手动解绑性能优化✅ 假造 DOM + Diff 算法❌ 直接操纵 DOM，性能较低52. vuex的相应式处置处罚。

🔥 Vuex 的相应式原理（口试高频考点）

vue中可以直打仗发methods中的方法，vuex是不可以的。将来处置处罚异步，当触发事故的时间，会通过dispatch来访问 actions中的方法，actions中的commit会触发mutations中的方法从而修改state里的值，通过getter把数据更新到视图
Vue.use(vuex)，调用install方法，通过applyMixin(vue)在恣意组件内实验this.$store就可以访问到store对象。 vuex的state是相应式的，借助的就是vue的data，把state存到vue实例组件的data中
Vuex 通过 Vue 的相应式体系（Vue.observable() 或 reactive()） 实现全局状态管理：

Vue2 利用 Vue.observable()，基于 Object.defineProperty() 实现相应式。
Vue3 利用 reactive()，基于 Proxy 署理整个对象，性能更优。
Vue 组件会主动订阅 state，当 state 厘革时，Vue 会触发 render() 重新渲染组件。
Vuex 欺压要求 state 只能通过 mutations 修改，克制 Vue 无法检测数据变更。

💡 如果是 Vue 3 新项目，保举利用 Pinia，相应式更强盛，代码更简单！ 🚀
53.vue中遍历全局的方法有哪些？

在 Vue 中，遍历全局的方法告急有以下几种：

🔥 1. 遍历全局组件

📌 Vue 2

console.log(Vue.options.components); // 获取所有全局组件
Object.keys(Vue.options.components).forEach((name) => {
console.log(name); // 组件名
});

复制代码

📌 Vue 3

import { getCurrentInstance } from "vue";
export default {
setup() {
const instance = getCurrentInstance();
console.log(instance.appContext.components); // Vue 3 获取全局组件
}
};

复制代码

🔥 2. 遍历全局指令

📌 Vue 2

console.log(Vue.options.directives);

复制代码

📌 Vue 3

const instance = getCurrentInstance();
console.log(instance.appContext.directives); // 获取全局指令

复制代码

🔥 3. 遍历全局 mixins

📌 Vue 2

console.log(Vue.options.mixins);

复制代码

📌 Vue 3

const instance = getCurrentInstance();
console.log(instance.appContext.mixins);

复制代码

🔥 4. 遍历 Vuex Store（全局状态）

Object.keys(this.$store.state).forEach(key => {
console.log(key, this.$store.state[key]); // Vuex 全局状态
});

复制代码

🔥 5. 遍历路由

this.$router.getRoutes().forEach(route => {
console.log(route.name, route.path);
});

复制代码

🔥 6. 遍历全局注册的插件

Vue 自己没有直接袒露获取全部插件的方法，但可以在 Vue.use() 注册插件时，自己维护一个全局数组：

const plugins = [];
const registerPlugin = (plugin) => {
plugins.push(plugin);
Vue.use(plugin);
};
registerPlugin(MyPlugin);
console.log(plugins); // 存储所有全局插件

复制代码

✅ 总结

遍历对象Vue 2 方式Vue 3 方式全局组件Vue.options.componentsgetCurrentInstance().appContext.components全局指令Vue.options.directivesgetCurrentInstance().appContext.directives全局 mixinsVue.options.mixinsgetCurrentInstance().appContext.mixinsVuex stateObject.keys(this.$store.state)Object.keys(this.$store.state)全局路由this.$router.options.routesthis.$router.getRoutes()全局插件手动存储插件手动存储插件💡 Vue 3 须要 getCurrentInstance().appContext 来访问全局注册项，而 Vue 2 直接用 Vue.options！ 🚀
大概回复forEach,map,some,filter??这个题我以为有歧义，在下没有搞懂想问什么
53. 怎样搭建脚手架？

Vue 搭建脚手架的方法

Vue 项目可以利用官方 CLI（Vue CLI）或 Vite 来搭建。下面是两种主流方式的搭建方法。

🔥 方法 1：利用 Vue CLI（实用于 Vue 2 & Vue 3）

Vue CLI 是 Vue 官方提供的脚手架工具，可以快速创建 Vue 2 或 Vue 3 项目。
📌 1. 安装 Vue CLI

如果没有安装 Vue CLI，可以用以下下令安装：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

复制代码

📌 Vue CLI 4.x 及以上支持 Vue 3，Vue CLI 3.x 仅支持 Vue 2。
📌 2. 创建 Vue 项目

vue create my-project

复制代码

实验后，CLI 会提供选项：

Default（Vue 3 + Babel + ESLint）
Manually select features（手动选择设置）

如果要创建 Vue 2 项目：

vue create my-project
--preset default

复制代码

然后手动选择 Vue 2 版本。
📌 3. 进入项目并运行

cd my-project
npm run serve
# 或
yarn serve

复制代码

默认环境下，项目会在 http://localhost:8080 运行。

🔥 方法 2：利用 Vite（保举，实用于 Vue 3）

Vite 是更快的构建工具，Vue 3 官方保举利用 Vite 代替 Vue CLI。
📌 1. 利用 Vite 创建 Vue 3 项目

npm create vite@latest my-vue-app --template vue
# 或者
yarn create vite@latest my-vue-app --template vue

复制代码

--template vue 代表创建 Vue 3 项目
你也可以利用 --template vue-ts 创建 TypeScript 项目

📌 2. 进入项目目次

cd my-vue-app

复制代码

📌 3. 安装依靠

npm install
# 或
yarn install

复制代码

📌 4. 启动项目

npm run dev
# 或
yarn dev

复制代码

Vite 默认在 http://localhost:5173 运行。

✅ Vue CLI vs Vite 对比

对比项Vue CLIVite（保举）实用版本Vue 2 & Vue 3Vue 3打包速率较慢更快开辟体验Webpack 需重启HMR（热更新）更快构建工具WebpackEsbuild & Rollup默认端口80805173

🔥 总结

如果是 Vue 3 项目，保举 Vite，启动快，开辟体验更好。
如果是 Vue 2 项目，利用 Vue CLI 搭建。

54.封装一个可复用的组件，须要满足什么条件？

🔥 封装可复用 Vue 组件须要满足的条件

在 Vue 中，封装一个高质量、可复用的组件须要思量筹划规范、功能封装、机动性、性能优化等方面。以下是封装组件时的关键点：

✅ 1. 组件的通用性

组件应具有独立性，克制与特定业务强耦合。
组件支持传参（props） ，可根据差别需求调解。
支持插槽（slot） ，让用户机动控制内部内容。

📌 示例

<template>
<button :class="['btn', type]" @click="handleClick">
<slot>默认按钮</slot>
</button>
</template>
<script setup>
defineProps({
type: { type: String, default: 'primary' } // 可传入 'primary'、'success' 等
});
const emit = defineEmits(['click']);
const handleClick = () => {
emit('click');
};
</script>
<style scoped>
.btn {
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.primary {
background-color: blue;
color: white;
}
.success {
background-color: green;
color: white;
}
</style>

复制代码

💡 关键点

✅ props 提供组件自界说本领
✅ slot 提供机动的内容插入
✅ emit 让组件与外部交互

✅ 2. 组件的可维护性

组件应该职责单一，每个组件只完成一个功能。
代码应结构清楚，逻辑、样式、模板分离。

📌 示例

<template>
<input v-model="modelValue" :placeholder="placeholder" class="input" />
</template>
<script setup>
defineProps({
modelValue: String,
placeholder: { type: String, default: '请输入内容' }
});
defineEmits(['update:modelValue']);
</script>
<style scoped>
.input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>

复制代码

💡 关键点

✅ 利用 v-model 绑定值，符合 Vue 规范
✅ props + emit 联合，实现双向数据绑定
✅ 克制在组件内直接修改 props，而是用 emit 触发事故

✅ 3. 组件的机动性

组件应该支持多种设置，可以通过 props 控制样式和举动。
提供默认插槽和作用域插槽，让外部决定内容。

📌 作用域插槽示例

<template>
<div class="list">
<slot v-for="(item, index) in items" :item="item" :index="index">
<p>{{ item }}</p>
</slot>
</div>
</template>
<script setup>
defineProps({
items: { type: Array, default: () => [] }
});
</script>
<style scoped>
.list {
padding: 10px;
border: 1px solid #ddd;
}
</style>

复制代码

💡 关键点

✅ slot 让外部决定渲染方式
✅ 作用域插槽让外部组件可以访问 item 和 index

✅ 4. 组件的性能优化

克制不须要的渲染，利用 computed 或 watch 举行优化。
key 绑定 克制列表渲染错误。
事故烧毁，利用 onUnmounted 清算事故监听。

📌 示例

<template>
<div>{{ computedValue }}</div>
</template>
<script setup>
import { computed, ref } from 'vue';
const props = defineProps({
value: Number
});
const computedValue = computed(() => props.value * 2);
</script>

复制代码

💡 关键点

✅ computed 只在依靠变更时重新盘算，克制不须要的渲染
✅ 清算事故监听，克制内存走漏

✅ 5. 组件的可扩展性

提供 自界说事故，方便外部监听。
利用 defineExpose 公开方法，方便父组件调用。

📌 示例

<template>
<input ref="inputRef" v-model="value" />
</template>
<script setup>
import { ref, defineExpose } from 'vue';
const value = ref('');
const inputRef = ref(null);
defineExpose({
focus: () => inputRef.value.focus()
});
</script>

复制代码

外部组件调用：

<template>
<MyInput ref="inputComponent" />
<button @click="focusInput">聚焦输入框</button>
</template>
<script setup>
import { ref } from 'vue';
import MyInput from './MyInput.vue';
const inputComponent = ref(null);
const focusInput = () => {
inputComponent.value.focus();
};
</script>

复制代码

💡 关键点

✅ defineExpose 允许父组件调用子组件的方法
✅ 组件封装依照 Vue 3 语法，符合最佳实践

✅ 6. 组件的易用性

提供清楚的 API 文档，让开辟者快速上手。
支持国际化（i18n） ，顺应差别语言需求。

🔥 结论

条件阐明通用性组件应支持 props、slot、emit 举行自界说可维护性结构清楚，逻辑、样式、模板分离机动性提供作用域插槽，支持多种设置性能优化利用 computed、事故烧毁、克制不须要渲染可扩展性公开方法 defineExpose，支持 emit 事故易用性结构清楚，支持国际化🎯 总结

在 Vue 组件封装中，要思量通用性、机动性、性能优化、易用性等多个方面。 组件应做到低耦合、高可复用、易扩展，才气真正成为一个精良的 Vue 组件！ 🚀
55.vue的过滤器怎么利用？

在 Vue 中，过滤器（Filters） 用于对文本举行格式化处置处罚（如日期、货币格式化），不外须要注意 Vue 2 与 Vue 3 的差别。以下是具体利用方法：

Vue 2 中的过滤器

1. 全局注册过滤器

在 main.js 中界说全局过滤器：

// 日期格式化过滤器
Vue.filter('formatDate', function(value) {
if (!value) return '';
return new Date(value).toLocaleDateString();
});
// 货币符号过滤器
Vue.filter('currency', function(value, symbol = '¥') {
return symbol + value.toFixed(2);
});

复制代码

2. 局部注册过滤器

在组件选项中界说：

export default {
filters: {
capitalize: function(value) {
if (!value) return '';
return value.toString().charAt(0).toUpperCase() + value.slice(1);
}
}
}

复制代码

3. 在模板中利用

通过管道符 | 调用过滤器，支持串联：

<p>{{ date | formatDate }}</p>
<p>{{ price | currency('$') | toUpperCase }}</p>

复制代码

4. 在 JS 中调用

通过 $options.filters 访问：

this.$options.filters.formatDate(this.date);

复制代码

Vue 3 中的厘革

Vue 3 移除了过滤器（Filters） ，发起利用以下更换方案：
1. 利用方法（Methods）

直接在模板中调用方法：

<p>{{ formatDate(date) }}</p>

复制代码

export default {
methods: {
formatDate(value) {
return new Date(value).toLocaleDateString();
}
}
}

复制代码

2. 利用盘算属性（Computed）

恰当依靠数据的格式化处置处罚：

<p>{{ formattedDate }}</p>

复制代码

export default {
computed: {
formattedDate() {
return new Date(this.date).toLocaleDateString();
}
}
}

复制代码

3. 全局属性（联合 app.config.globalProperties）

界说全局方法供全部组件利用：

// main.js
const app = createApp(App);
app.config.globalProperties.$filters = {
formatDate(value) {
return new Date(value).toLocaleDateString();
}
};
// 组件中使用
<p>{{ $filters.formatDate(date) }}</p>

复制代码

4. Composition API

在 setup() 中利用工具函数：

<script setup>import { formatDate } from '@/utils/filters';const date = ref('2023-10-01');</script><template> <p>{{ formatDate(date) }}</p>
</template>

复制代码

过滤器迁移发起

Vue 2 项目升级：渐渐更换过滤器为方法或盘算属性。
新项目（Vue 3） ：直接利用方法或工具函数。

总结

版本方案示例Vue 2全局/局部过滤器`{{ dateVue 3方法/盘算属性/全局属性{{ formatDate(date) }}发起优先利用方法或工具函数，既清楚又兼容性更好，尤其是在须要复用复杂逻辑时。
56.vue中怎样做欺压革新？react中怎样做欺压革新？

🔥 Vue 和 React 中怎样做欺压革新？

在 Vue 和 React 中，偶然我们须要欺压革新组件，绕过 Vue 或 React 的优化机制，确保组件重新渲染。常见的方法包罗 利用 key 重新挂载组件、修改状态、利用 forceUpdate()（React 专用）等。

✅ Vue 中的欺压革新

1️⃣ 通过 key 重新挂载组件（保举）

Vue 依靠 假造 DOM 举行高效更新，修改 key 可以欺压烧毁并重新创建组件。

<template>
<MyComponent :key="refreshKey" />
<button @click="forceRefresh">刷新组件</button>
</template>
<script setup>
import { ref } from "vue";
import MyComponent from "./MyComponent.vue";
const refreshKey = ref(0);
const forceRefresh = () => {
refreshKey.value += 1; // 修改 key 触发重新渲染
};
</script>

复制代码

💡 实用场景

✅ 实用于整个组件须要重新渲染的环境（如组件状态非常、生命周期重新触发）

2️⃣ 通过 v-if 重新挂载组件

利用 v-if 先卸载再挂载组件，到达欺压革新的效果。

<template>
<MyComponent v-if="isShow" />
<button @click="forceRefresh">刷新组件</button>
</template>
<script setup>
import { ref } from "vue";
import MyComponent from "./MyComponent.vue";
const isShow = ref(true);
const forceRefresh = () => {
isShow.value = false;
setTimeout(() => (isShow.value = true), 0); // 重新挂载
};
</script>

复制代码

💡 实用场景

✅ 实用于子组件数据非常，无法通过 props 更新的环境

3️⃣ 直接革新页面（彻底革新）

<button @click="window.location.reload()">刷新整个页面</button>

复制代码

💡 实用场景

✅ 实用于全局数据非常或 API 状态不同等时

✅ React 中的欺压革新

1️⃣ 通过 useState 触发重渲染（保举）

React 组件会在 state 厘革时重新渲染。利用一个 无关数据 欺压触发 useState 厘革。

import React, { useState } from "react";
const MyComponent = () => {
const [refreshKey, setRefreshKey] = useState(0);
return (
<>
<ChildComponent key={refreshKey} />
<button onClick={() => setRefreshKey(refreshKey + 1)}>刷新组件</button>
</>
);
};
export default MyComponent;

复制代码

💡 实用场景

✅ 实用于局部组件革新，克制整个应用革新

2️⃣ 通过 forceUpdate() 触发欺压革新（仅 class 组件）

React forceUpdate() 会忽略 shouldComponentUpdate，直接重新渲染。

import React, { Component } from "react";
class MyComponent extends Component {
forceRefresh = () => {
this.forceUpdate(); // 强制刷新
};
render() {
return (
<>
<ChildComponent />
<button onClick={this.forceRefresh}>刷新组件</button>
</>
);
}
}

复制代码

💡 实用场景

✅ 实用于 Class 组件，已被 Hooks 代替，不保举

3️⃣ 通过 window.location.reload() 革新整个页面

<button onClick={() => window.location.reload()}>刷新页面</button>

复制代码

💡 实用场景

✅ 实用于全局状态非常（如 Redux 丢失数据）

🔥 Vue vs React 欺压革新方式对比

方法VueReact修改 key 重新挂载✅ :key="refreshKey"✅ <ChildComponent key={refreshKey} />v-if 重新挂载✅ v-if="isShow"❌（React 无 v-if）修改状态触发重渲染✅ state++✅ setState(state + 1)forceUpdate()❌（Vue 不支持）✅ 仅 Class 组件window.location.reload()✅✅

🎯 结论

Vue 保举：利用 key 或 v-if 重新挂载组件。
React 保举：利用 useState 触发重渲染，Class 组件可用 forceUpdate()。
全局题目：window.location.reload() 实用于 Vue 和 React。

🚀 一样寻常来说，修改 key 是最优雅的欺压革新方式！
57.vue的性能优化怎么做？

🔥 Vue 性能优化指南

Vue 作为一个相应式框架，默认已经做了很多优化，但在复杂业务场景下，我们仍旧须要手动优化，确保应用运行流畅。以下是 Vue 性能优化的关键战略：

1️⃣ 盘算属性 (computed) 代替方法 (methods)

题目：如果在模板中直接利用 methods，每次渲染都会实验一次函数。
优化：利用 computed 举行缓存，只有依靠的数据厘革时才会重新盘算。

✅ 优化前（性能低）

<template>
<p>{{ computedValue() }}</p>
</template>
<script setup>
const computedValue = () => {
console.log("计算了！"); // 每次渲染都会调用
return Math.random();
};
</script>

复制代码

✅ 优化后（性能高）

<template>
<p>{{ computedValue }}</p>
</template>
<script setup>
import { computed } from "vue";
const computedValue = computed(() => {
console.log("计算了！"); // 只有依赖更新时才执行
return Math.random();
});
</script>

复制代码

💡 实用场景

✅ 实用于有复杂盘算的场景，淘汰重复盘算

2️⃣ v-if 和 v-show 的选择

v-if：按需烧毁（性能高，但切换有本钱）
v-show：表现/潜伏（性能低，但切换快）

✅ 优化前（不须要的 v-if）

<template>
<div v-if="isShow">切换的内容</div>
</template>

复制代码

⚠️ 题目：频仍切换时，v-if 反复烧毁和创建组件，影响性能。
✅ 优化后（利用 v-show）

<template>
<div v-show="isShow">切换的内容</div>
</template>

复制代码

💡 结论

长时间不须要表现时：用 v-if（淘汰 DOM 占用）
频仍切换表现状态时：用 v-show（淘汰重新渲染）

3️⃣ 利用 key 优化 v-for 遍历

key 让 Vue 更高效地更新 DOM，克制不须要的重新渲染。

✅ 优化前（性能低，Vue 不能高效复用 DOM）

<template>
<ul>
<li v-for="item in list">{{ item.name }}</li>
</ul>
</template>

复制代码

✅ 优化后（性能高）

<template>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
</template>

复制代码

💡 结论：

克制利用数组索引作为 key
最好利用唯一标识符（如 id）

4️⃣ watch 和 watchEffect 的优化

watch 监听特定命据厘革，进步性能。
克制深度监听 deep: true，如果大概的话，监听具体属性。

✅ 优化前（深度监听会斲丧性能）

watch(
() => state,
(newVal) => {
console.log("数据变了", newVal);
},
{ deep: true }
);

复制代码

✅ 优化后（监听具体字段）

watch(
() => state.value,
(newVal) => {
console.log("value 变了", newVal);
}
);

复制代码

💡 结论

只管克制 deep: true，只监听须要的数据
克制不须要的 watch，利用 computed 代替

5️⃣ 路由懒加载（按需加载组件）

题目：如果不做优化，Vue 会一次性加载全部组件，影响首屏速率。
优化：利用 import() 按需加载 组件。

✅ 优化前（性能低）

import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

复制代码

✅ 优化后（性能高）

const Home = () => import('@/views/Home.vue');
const About = () => import('@/views/About.vue');

复制代码

💡 实用场景 ✅ 大规模应用，淘汰初始加载时间

6️⃣ 长列表优化 (virtual list)

题目：v-for 渲染大量数据会严厉影响性能。
办理方案：利用假造列表（只渲染可见部分）。

✅ 优化前（直接 v-for 渲染 10000 条数据，卡顿）

<template>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
</template>

复制代码

✅ 优化后（利用 Vue 假造列表库 vue-virtual-scroller）

<template>
<RecycleScroller
:items="list"
:item-size="50"
key-field="id"
>
<template v-slot="{ item }">
<div>{{ item.name }}</div>
</template>
</RecycleScroller>
</template>

复制代码

💡 实用场景 ✅ 数据量凌驾 1000+ 时，必须利用假造列表

7️⃣ 事故烧毁 (onUnmounted)

题目：Vue 组件烧毁时，如果不扫除事故监听，会造成内存走漏。
优化：在 onUnmounted 里烧毁事故。

✅ 优化前（内存走漏风险）

onMounted(() => {
window.addEventListener("resize", handleResize);
});

复制代码

✅ 优化后（扫除事故监听）

import { onMounted, onUnmounted } from "vue";onMounted(() => {
window.addEventListener("resize", handleResize);
});
onUnmounted(() => { window.removeEventListener("resize", handleResize);});

复制代码

💡 实用场景 ✅ 组件烧毁后须要扫除事故监听

🔥 总结

优化战略优化方式实用场景盘算属性优化computed 代替 methods复杂盘算克制重复实验条件渲染优化v-if vs v-showv-show 实用于频仍切换列表渲染优化key & 假造列表遍历大数据时watch 优化克制 deep: true监听具体属性路由懒加载import() 动态加载加速首屏速率假造滚动vue-virtual-scroller处置处罚超大列表事故烧毁onUnmounted 清算组件烧毁时清算事故🚀 Vue 默认已经很快，但公道优化可以让它更快！

克制不须要的渲染
只加载须要的数据
清算不须要的监听
利用高效的数据处置处罚方法

58.首屏优化该怎样去做？

🔥 Vue 首屏优化方案（极致提速）

首屏优化（First Screen Optimization）告急针对首屏白屏时间和加载速率举行优化。我们须要淘汰首屏资源体积、网络哀求次数、渲染时间等，确保用户可以快速看到内容。

🚀 1️⃣ 开启 Gzip/Brotli 压缩（淘汰资源体积）

题目：Vue 天生的 dist 目次资源体积大，加载慢。
优化：开启 Gzip 或 Brotli 压缩，淘汰前端静态资源巨细。

✅ Webpack 设置 Gzip

const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
algorithm: "gzip",
test: /.(js|css|html|svg)$/, // 需要压缩的文件类型
threshold: 10240, // 只处理 10KB 以上的文件
minRatio: 0.8, // 压缩比
}),
],
},
};

复制代码

✅ 利用 Brotli（更高压缩率）

const BrotliPlugin = require('brotli-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new BrotliPlugin({
asset: '[path].br[query]',
test: /.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8
})
]
}
};

复制代码

💡 实用场景

✅ 实用于全部 Vue 项目，明显淘汰文件体积

🚀 2️⃣ 路由懒加载（淘汰首屏加载体积）

题目：如果 import 直接引入全部页面组件，首屏加载时间过长。
优化：利用 路由懒加载，首屏仅加载须要组件，其他组件按需加载。

✅ 优化前（全部页面组件一次性加载）

import Home from "@/views/Home.vue";
import About from "@/views/About.vue";
const routes = [
{ path: "/", component: Home },
{ path: "/about", component: About },
];

复制代码

✅ 优化后（按需加载组件）

const routes = [
{ path: "/", component: () => import("@/views/Home.vue") },
{ path: "/about", component: () => import("@/views/About.vue") },
];

复制代码

💡 实用场景

✅ 实用于 Vue 单页应用（SPA），淘汰首屏加载时间

🚀 3️⃣ 组件按需加载（淘汰打包体积）

题目：Vue 组件库（如 Element Plus、Ant Design Vue）会全部引入，导致打包体积过大。
优化：利用按需加载，仅引入用到的组件。

✅ 优化前（全量引入，导致首屏加载慢）

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
app.use(ElementPlus);

复制代码

✅ 优化后（按需加载）

import { ElButton, ElTable } from "element-plus";
app.use(ElButton);
app.use(ElTable);

复制代码

💡 实用场景
✅ 实用于大型 Vue 项目，明显淘汰 JS 体积

🚀 4️⃣ Vue Keep-Alive（缓存页面，进步二次加载速率）

题目：每次切换路由时，都会重新加载页面，影响二次访问速率。
优化：利用 <keep-alive> 缓存组件，克制重复渲染。

✅ 优化前

<router-view />

复制代码

✅ 优化后

<keep-alive> <router-view />
</keep-alive>

复制代码

💡 实用场景
✅ 实用于需缓存的页面，如 Tab 切换、返回上一级

🚀 5️⃣ 预渲染 SSR（淘汰白屏时间）

题目：Vue 是单页应用（SPA），首屏大概会白屏。
优化：利用**预渲染（Prerendering）**或 SSR（服务端渲染） ，让页面更快可见。

✅ 预渲染设置（Prerender SPA Plugin）

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const path = require("path");
module.exports = {
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, "dist"),
routes: ["/", "/about"], // 预渲染的路由
}),
],
},
};

复制代码

✅ 利用 Nuxt.js 举行 SSR

npx create-nuxt-app my-app

复制代码

💡 实用场景
✅ 实用于 SEO 需求较高的 Vue 项目，如博客、电商站点

🚀 6️⃣ 静态资源 CDN 加速（淘汰服务器压力）

题目：Vue 依靠的 vue.js、axios、element-plus 等库默认是当地加载，导致首屏加载慢。
优化：利用 CDN 加载常用库，淘汰当地打包体积。

✅ 优化前（当地打包，文件过大）

"dependencies": {
"vue": "^3.0.0",
"axios": "^0.21.1"
}

复制代码

✅ 优化后（CDN 加载 Vue 和 Axios）

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>

复制代码

💡 实用场景
✅ 实用于 Vue Web 项目，淘汰当地打包体积

🚀 7️⃣ 耽误加载图片（Lazy Load）

题目：如果页面有大量图片，加载速率会变慢。
优化：利用懒加载，只有图片出如今可视地区时才加载。

✅ 优化前

<img :src="imageSrc" />

复制代码

✅ 优化后（利用 v-lazy）

<img v-lazy="imageSrc" />

复制代码

✅ Vue 3 懒加载

<template>
<img v-if="isInView" :src="imageSrc" />
</template>
<script setup>
import { ref, onMounted } from "vue";
const isInView = ref(false);
onMounted(() => {
const observer = new IntersectionObserver((entries) => {
isInView.value = entries[0].isIntersecting;
});
observer.observe(document.querySelector("img"));
});
</script>

复制代码

💡 实用场景
✅ 实用于图片较多的页面，淘汰首屏加载时间

🎯 总结：Vue 首屏优化战略

优化方式作用实用场景Gzip/Brotli 压缩淘汰打包体积全部 Vue 项目路由懒加载只加载首屏须要组件SPA 应用组件按需加载仅引入用到的组件利用 UI 库Keep-Alive 缓存克制重复渲染Tab 页面缓存SSR / 预渲染淘汰白屏时间，SEO 友好SEO 需求高CDN 加速加速静态资源加载Vue Web 项目图片懒加载耽误加载图片需优化大量图片🚀 综合利用这些优化方案，可以让 Vue 首屏加载速率进步 30%~60%！ 💪
59.vue3为什么利用proxy？

Vue 3 为什么利用 Proxy？（相比 Vue 2 的 Object.defineProperty）

在 Vue 2 中，相应式体系是基于 Object.defineProperty 实现的，而在 Vue 3 中，改用 Proxy 作为相应式焦点。这一改变带来了诸多上风，办理了 Vue 2 相应式的范围性。

🌟 1. Vue 2 相应式的范围性

Vue 2 利用 Object.defineProperty 挟制对象的每个属性 来实现数据相应式，但存在以下题目：
❌ (1) 不能监听新增/删除的属性

const obj = {};
Vue.set(obj, "name", "Vue3"); // 必须使用 Vue.set 才能响应式
delete obj.name; // 删除属性无法触发更新

复制代码

由于 Object.defineProperty 只能挟制已有属性，新增属性不会主动酿成相应式。

❌ (2) 不能监听数组的厘革

const arr = [];
arr[0] = "Vue3"; // 无法监听
arr.length = 0; // 也不会触发更新

复制代码

Vue 2 须要对数组的方法（push/pop/shift/splice）举行手动挟制，但仍无法监听数组索引的厘革。

❌ (3) 深条理嵌套对象须要递归遍历

const data = { a: { b: { c: 1 } } };

复制代码

Vue 2 初始化时，必须递归遍历整个对象，每一层都用 Object.defineProperty 处置处罚。
深层嵌套对象性能差，对象越大，初始化越慢。

✅ 2. Vue 3 接纳 Proxy 的上风

Vue 3 利用 Proxy 代替 Object.defineProperty，办理了上述题目。
🚀 (1) 可以监听对象新增/删除属性

const obj = reactive({});
obj.name = "Vue3"; // ✅ 直接赋值就能响应式
delete obj.name; // ✅ 删除属性也能触发更新

复制代码

Proxy 署理整个对象，可以动态监听属性的新增和删除。

🚀 (2) 可以监听数组索引和 length 厘革

const arr = reactive([]);
arr[0] = "Vue3"; // ✅ 能正确监听
arr.length = 0; // ✅ 能触发更新

复制代码

Proxy 直接署理整个数组，以是索引和 length 厘革都能触发更新。

🚀 (3) 无需递归，性能更优

const data = reactive({ a: { b: { c: 1 } } });

复制代码

Vue 3 只署理第一层对象，深层属性只有在访问时才会酿成相应式（懒署理） 。
克制了一次性遍历整个对象，提拔初始化性能。

🚀 (4) 能署理 Map、Set、WeakMap、WeakSet

const map = reactive(new Map());
map.set("key", "Vue3"); // ✅ 能正常响应式

复制代码

Vue 2 不能挟制 Map 和 Set，Vue 3 通过 Proxy 支持它们的相应式。

🔥 3. Vue 3 Proxy 代码示例

const state = reactive({ count: 0 });
watchEffect(() => {
console.log(state.count);
});
state.count++; // ✅ 能触发响应式

复制代码

Vue 3 利用 reactive 内部基于 Proxy 实现相应式。
全下属性（新增、删除、嵌套对象）都能精确触发更新。

🎯 总结

特性Vue 2（Object.defineProperty）Vue 3（Proxy）监听新增/删除属性❌ 不能✅ 可以监听数组索引厘革❌ 不能✅ 可以监听 length 厘革❌ 不能✅ 可以深层对象相应式❌ 须要递归遍历✅ 访问时才署理（性能更优）支持 Map/Set❌ 不支持✅ 完全支持性能🔴 初始化慢，嵌套对象影响大🟢 性能更优🚀 Vue 3 利用 Proxy 彻底办理了 Vue 2 的相应式范围，提拔了性能和开辟体验！ 💪
60.vue3的性能为什么比vue2好？

🔥 Vue 3 为什么比 Vue 2 性能更好？（焦点优化点）

Vue 3 举行了多个底层优化，使其比 Vue 2 运行更快、内存占用更低、渲染更高效。以下是关键的性能优化点👇：

🚀 1. 接纳 Proxy 代替 Object.defineProperty（提拔相应式性能）

Vue 2 利用 Object.defineProperty 挟制对象的每个属性，存在无法监听新增属性、无法监听数组索引、深层对象递归遍历导致性能低下的题目。
✅ Vue 3 利用 Proxy 办理这些题目

const state = reactive({ count: 0 });
state.count++; // ✅ 直接修改就能触发更新（比 Vue 2 更高效）
state.newProp = "Vue3"; // ✅ 可以监听新增属性

复制代码

🌟 Proxy 上风

对比项Vue 2（Object.defineProperty）Vue 3（Proxy）监听新增/删除属性❌ 不支持✅ 支持监听数组索引❌ 不能监听✅ 可以监听监听 length 厘革❌ 不能监听✅ 可以监听深层对象挟制❌ 须要递归遍历✅ 访问时才署理（性能更优）🚀 效果

✅ 淘汰递归遍历，相应式更快、更高效
✅ 淘汰内存占用，访问时才触发署理

🚀 2. 编译优化（更高效的 Diff 算法）

❌ Vue 2 的题目

Vue 2 接纳 “全量 Diff” 算法，即组件发生厘革时，整个 Virtual DOM 须要重新比对，导致不须要的性能消耗。

✅ Vue 3 接纳 “Block Tree + Patch Flag”（动态标志最小更新单元）

Vue 3 在编译时优化，给节点打上Patch Flag，只更新真正厘革的部分：

<template>
<h1>{{ title }}</h1>
<p>静态文本，不变的部分</p>
</template>

复制代码

编译后的 VNode 结构：

{
type: 'h1',
flag: 1, // ✅ 只追踪 "title" 变化
}

复制代码

🌟 效果

✅ 只更新厘革的部分（更少的 DOM 操纵）
✅ 淘汰不须要的比对，进步渲染服从

🚀 3. 组件优化（淘汰内存占用 & 运行时开销）

✅ Vue 3 移除了 this，淘汰运行时开销

Vue 2 利用 this 访问数据：

export default {
data() {
return { count: 0 };
},
methods: {
increment() {
this.count++; // ✅ Vue 2 需要绑定 this
}
}
};

复制代码

Vue 3 接纳 setup 语法，克制 this 绑定：

export default {
setup() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
};

复制代码

🌟 效果

✅ 淘汰 this 分析开销，实验服从更高
✅ 更轻便，代码更直观

🚀 4. Tree Shaking（按需打包，淘汰体积）

❌ Vue 2 的题目

Vue 2 是全局 API 注册，纵然没用到某些功能，也会被打包进终极文件。

✅ Vue 3 接纳 “Tree Shaking”

Vue 3 把 API 筹划成按需导入，只打包用到的部分：

import { reactive, computed } from "vue"; // ✅ 只引入需要的 API

复制代码

🌟 效果

✅ 淘汰不须要的代码，打包体积更小
✅ 性能更好，按需加载进步运行服从

🚀 5. Fragment（淘汰 DOM 层级，进步渲染性能）

❌ Vue 2 的题目

Vue 2 每个组件必须有一个根节点，导致多余的 DOM 层级：

<template>
<div>
<h1>Vue 2</h1>
<p>增加了不必要的 DOM 层级</p>
</div>
</template>

复制代码

✅ Vue 3 支持 Fragment（组件可以返回多个根节点）

<template>
<h1>Vue 3</h1>
<p>没有多余的 DOM 结构</p>
</template>

复制代码

🌟 效果

✅ 淘汰不须要的 div，淘汰 DOM 层级
✅ 进步渲染性能，淘汰 DOM 操纵

🚀 6. Teleport（更快的 Modal/弹窗渲染）

❌ Vue 2 的题目

组件内部的 Modal/弹窗 必须放在当前组件内，容易导致 z-index 层级紊乱：

<template>
<div>
<MyModal />
</div>
</template>

复制代码

✅ Vue 3 提供 Teleport，可以让元素渲染到 body 之外

<template>
<teleport to="body">
<MyModal />
</teleport>
</template>

复制代码

🌟 效果

✅ 进步弹窗渲染性能
✅ 克制 z-index 层级题目

🎯 总结：Vue 3 告急的性能优化点

优化点Vue 2（Object.defineProperty）Vue 3（Proxy）相应式优化Object.defineProperty 不能监听新增/删除Proxy 支持动态监听Diff 算法须要全量比对 Virtual DOM通过 Patch Flag 只更新厘革的部分代码优化依靠 this，运行时开销大setup 淘汰 this 分析，进步实验服从Tree Shaking全局 API 注册，打包体积大按需引入，淘汰打包体积Fragment组件必须有根节点支持多个根节点，淘汰 DOM 层级Teleport组件内容受限于父级可将内容渲染到 body，淘汰 DOM 操纵

🎯 结论

🚀 Vue 3 通过 Proxy、编译优化、组件优化、Tree Shaking 等，使其在运行时、渲染性能、打包体积等方面全面逾越 Vue 2 💪
✅ 相应式更快，渲染更高效，打包更轻量！
61.说一下你对组件的明确

🔹 你对 Vue 组件的明确？（口试官常问）

📌 1. 什么是 Vue 组件？

Vue 组件是 Vue 应用的根本构成单元，本质上是一个封装了 HTML、CSS、JS 的独立模块，可以复用、组合、拆分，进步代码的可维护性和开辟服从。

📌 2. Vue 组件的焦点特性？

1️⃣ 组件化开辟（模块化 & 复用性）

组件可以独立封装，淘汰代码冗余，进步开辟服从。
比方：一个 Button 组件可以在多个页面利用。

2️⃣ 组件通讯（Props / $emit / Provide & Inject / Vuex / Pinia）

父传子（Props）： props 让父组件向子组件转达数据。
**子传父（emit）：∗∗子组件可以通过‘emit）：** 子组件可以通过 `emit）：∗∗子组件可以通过‘emit` 触发父组件的方法。
跨层级通讯（Provide & Inject）： 实用于多层级组件转达数据。
全局状态管理（Vuex / Pinia）： 实用于复杂项目的全局状态管理。

3️⃣ 组件生命周期（生命周期钩子）

组件有完备的生命周期，如 onMounted、onUpdated、onUnmounted 等，可用于初始化、烧毁、更新操纵。

4️⃣ 动态组件 & 异步组件

动态组件： <component :is="currentComponent" />，可实现组件切换。
异步组件： defineAsyncComponent(() => import('./MyComponent.vue'))，可按需加载，提拔性能。

5️⃣ 插槽（Slot）

通过 slot 让组件更机动，如：

<MyCard>
<template v-slot:header> 标题 </template>
<template v-slot:default> 主要内容 </template>
</MyCard>

复制代码

📌 3. Vue 组件的优化？

1️⃣ 公道利用 v-if 和 v-show

v-if 实用于组件烧毁/创建（开销大，实用于少量切换）
v-show 实用于频仍切换（仅控制 display，性能更好）

2️⃣ 利用 computed 代替 methods，克制不须要的重复盘算

const fullName = computed(() => firstName + " " + lastName);

复制代码

3️⃣ 利用 keep-alive 缓存组件，克制重复烧毁/创建

<keep-alive>
<RouterView />
</keep-alive>

复制代码

4️⃣ 利用异步组件淘汰首屏加载压力

const AsyncComponent = defineAsyncComponent(() =>
import("./MyComponent.vue")
);

复制代码

5️⃣ 利用 Teleport 让弹窗渲染到 body 级别

<teleport to="body">
<MyModal />
</teleport>

复制代码

📌 4. 口试官追问：组件和模块的区别？

组件（Component）模块（Module）界说UI 结构、逻辑封装（如 Vue 组件）代码逻辑封装（如 ES6 Module）作用负责 UI 渲染和交互负责业务逻辑或工具函数复用性可复用 UI 组件可复用业务逻辑示例<Button /> 组件utils.js 工具函数

📌 5. 总结

Vue 组件是 Vue 开辟的焦点，具有 模块化、复用性、独立性、动态性 等特点。把握组件的 通讯方式、生命周期、优化本领，可以提拔 Vue 开辟服从和应用性能。
62.你是怎样规划项目文件的？

📌 你是怎样规划 Vue 项目的文件结构？（口试官常问）

在现实开辟中，公道的项目结构可以进步可维护性、可扩展性，并方便团队协作。下面是常见的 Vue 3 项目文件结构规划：

📂 1. 常见的 Vue 3 项目结构

├── public/ # 静态资源（不会被 Webpack 处理）
│ ├── index.html # HTML 入口文件
│ └── favicon.ico # 网站图标
├── src/ # 核心代码目录
│ ├── api/ # API 请求封装
│ │ ├── index.ts # 统一导出 API
│ │ ├── user.ts # 用户相关 API
│ │ ├── auth.ts # 登录相关 API
│ ├── assets/ # 静态资源（如图片、字体）
│ │ ├── images/ # 图片
│ │ ├── icons/ # 图标
│ │ ├── styles/ # 全局样式
│ ├── components/ # 复用组件（如按钮、弹窗）
│ │ ├── BaseButton.vue # 按钮组件
│ │ ├── BaseModal.vue # 弹窗组件
│ ├── layouts/ # 布局组件（如侧边栏、导航栏）
│ │ ├── DefaultLayout.vue # 默认布局
│ │ ├── AdminLayout.vue # 后台管理布局
│ ├── router/ # 路由管理
│ │ ├── index.ts # Vue Router 配置
│ │ ├── routes.ts # 路由表
│ ├── store/ # Vuex/Pinia 状态管理
│ │ ├── index.ts # 统一导出 Store
│ │ ├── user.ts # 用户相关状态
│ │ ├── settings.ts # 配置相关状态
│ ├── views/ # 页面组件（按功能模块拆分）
│ │ ├── Home.vue # 首页
│ │ ├── Login.vue # 登录页
│ │ ├── Dashboard.vue # 仪表盘
│ │ ├── Profile.vue # 个人中心
│ ├── utils/ # 工具函数
│ │ ├── request.ts # 封装 Axios 请求
│ │ ├── auth.ts # 鉴权相关工具
│ ├── directives/ # 自定义指令
│ │ ├── vPermission.ts # 权限指令
│ │ ├── vLazyLoad.ts # 图片懒加载
│ ├── composables/ # 组合式 API 封装（Vue 3）
│ │ ├── useAuth.ts # 用户认证逻辑
│ │ ├── useFetch.ts # 封装 Fetch 逻辑
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
├── tests/ # 单元测试
│ ├── components/ # 组件测试
│ ├── views/ # 页面测试
├── .env # 环境变量文件
├── vite.config.ts # Vite 配置文件
├── tsconfig.json # TypeScript 配置
├── package.json # 依赖管理
└── README.md # 项目说明文档

复制代码

📌 2. 具体规划与优化

1️⃣ src/api/ - API 哀求封装

接纳 模块化拆分，克制 API 逻辑散落在组件中。
封装 axios，同一管理哀求 & 相应拦截，便于维护。

✅ 示例

import axios from "axios";
const api = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_URL,
timeout: 5000,
});
// 请求拦截器
api.interceptors.request.use((config) => {
config.headers.Authorization = `Bearer ${localStorage.getItem("token")}`;
return config;
});
export default api;

复制代码

2️⃣ src/components/ - 复用组件

BaseXXX.vue 代表底子组件，如 BaseButton.vue、BaseTable.vue。
AppXXX.vue 代表全局应用组件，如 AppHeader.vue、AppFooter.vue。
业务组件（如 UserCard.vue、ProductItem.vue） 归类到具体 modules/ 目次下。

✅ 示例

<template>
<button class="base-button">
<slot></slot>
</button>
</template>

复制代码

3️⃣ src/store/ - 状态管理（Vuex / Pinia）

Vuex（Vue 2 & Vue 3）
Pinia（保举，实用于 Vue 3）

✅ Pinia 示例

import { defineStore } from "pinia";
export const useUserStore = defineStore("user", {
state: () => ({
userInfo: null,
}),
actions: {
setUser(data) {
this.userInfo = data;
},
},
});

复制代码

4️⃣ src/composables/ - 组合式 API（Vue 3）

封装可复用的逻辑
克制 mixin 难以维护的题目

✅ 示例

import { ref } from "vue";
export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}

复制代码

5️⃣ src/router/ - 路由管理

利用动态路由
路由懒加载（提拔首屏加载速率）

✅ 示例

import { createRouter, createWebHistory } from "vue-router";
const routes = [
{ path: "/", component: () => import("@/views/Home.vue") },
{ path: "/login", component: () => import("@/views/Login.vue") },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;

复制代码

📌 3. 口试官大概追问

❓ 为什么要分别 api/、composables/ 和 store/？

api/ 告急管理 后端接口哀求，让组件与 API 解耦。
composables/ 用于封装可复用的业务逻辑，便于组合式 API 复用。
store/ 管理全局状态，克制跨组件通讯复杂化。

❓ 你是怎样优化首屏加载的？

✅ 优化方式

路由懒加载：() => import('@/views/Home.vue')
异步组件：defineAsyncComponent()
资源按需加载：vite-plugin-components
CDN 引入：淘汰 node_modules 依靠
Gzip 压缩：淘汰资源体积

📌 4. 总结

✅ 公道的 Vue 目次结构 可以让项目更清楚、可维护、可扩展，同时优化代码复用和性能。
🚀 在口试中，重点夸大 “解耦、复用、可维护性”，并联合现实履历解答，
63.是否利用过nuxt.js？

是的，Nuxt.js 是一个基于 Vue.js 的框架，专门用来创建 服务端渲染（SSR） 或 静态站点天生（SSG） 的应用。它通过主动化的路由天生、服务器端渲染和优化的构建工具，提供了更高效的开辟体验。
Nuxt.js 的特点：

服务端渲染（SSR）
- Nuxt 提供了对 SSR 的支持，使得页面的首屏渲染能在服务器端举行，进步了 SEO 和性能。
静态站点天生（SSG）
- Nuxt 可以预渲染整个网站并天生静态文件，淘汰服务器压力，提拔加载速率。
- 实用于内容更新不频仍的网站，如博客、文档等。
主动路由天生
- Nuxt 会根据 pages/ 目次中的文件结构主动天生路由，无需手动设置。
插件体系
- 支持通过 plugins/ 目次注入外部插件或第三方库，非常恰当全局设置。
模块化开辟
- Nuxt 提供了大量的官方模块，资助开辟者轻松集成常见功能，如 axios 哀求、PWA 支持等。
热重载和开辟工具
- Nuxt 集成了 webpack，支持热重载，提拔开辟服从。
Vuex 状态管理
- Nuxt 默认支持 Vuex，使得全局状态管理更加便捷。

利用 Nuxt.js 的场景

SEO 友好的应用：须要服务器端渲染来提拔搜索引擎优化（SEO）的应用。
静态网站：如博客、消息网站，支持静态站点天生。
复杂的前端应用：好比管理体系、内容管理平台等。

Nuxt.js 的优缺点

长处

SEO 优化：SSR 提供了更好的搜索引擎优化。
开辟服从高：主动路由天生、模块化支持、插件机制。
性能优化：主动化的代码分割、静态站点天生等技能提拔性能。

缺点

学习曲线：固然 Nuxt 提供了开箱即用的功能，但对于初学者而言，它的一些设置项和概念（如 SSR、SSG）大概须要肯定的学习本钱。
机动性限定：在某些非常的场景下，Nuxt 的约定大概会限定开辟者的一些自界说需求。

总结

Nuxt.js 是构建 Vue 应用的强盛工具，特殊恰当须要服务端渲染或静态天生的网站。它通过主动化和优化，可以或许明显进步开辟服从和应用性能。
64.vue口试题 - SEO怎样优化？

📌 Vue 项目中的 SEO 优化：

在口试中，关于 SEO 优化 的题目是常见的，尤其是对于 单页应用（SPA） ，由于 Vue 默认是通过客户端渲染的，搜索引擎爬虫大概无法有用抓取到页面内容。
📌 1. 利用服务端渲染（SSR）或静态站点天生（SSG）

服务端渲染（SSR） 和 静态站点天生（SSG） 是优化 SPA SEO 的有用方案。
在 SSR 中，页面在服务器端渲染并返回完备的 HTML，如许爬虫能抓取到页面的完备内容。
Nuxt.js 是基于 Vue 的 SSR 框架，支持服务端渲染和静态站点天生，可以或许明显提拔 SEO 性能。

✅ 办理方案：

利用 Nuxt.js 来实现 SSR 或 SSG。
利用 Vue Server Renderer 举行服务端渲染。

📌 2. 预渲染（Prerendering）

预渲染 恰当内容更新不频仍的小型网站或博客，预渲染是在构建时天生静态的 HTML 页面。
这种方式通过工具（如 prerender-spa-plugin）可以将 Vue 应用在构建阶段转换为静态 HTML 页面。

✅ 办理方案：

利用 prerender-spa-plugin 共同 Webpack 对指定页面举行预渲染。

📌 3. 动态添加元标签（Meta Tags）

搜索引擎对 meta 标签（如 <title>、<meta>、<h1>）的内容非常敏感。这些标签能资助搜索引擎精确明确页面内容。
在 Vue 中，可以利用 vue-meta 插件动态更新页面的 <meta> 标签。

✅ 办理方案：

安装并设置 vue-meta 来动态设置页面的 title、meta 标签。
1. import VueMeta from 'vue-meta'
2. Vue.use(VueMeta)
复制代码
在组件中：
1. export default {
2. metaInfo: {
3. title: '我的页面标题',
4. meta: [
5. { name: 'description', content: '页面描述' },
6. { property: 'og:image', content: 'https://example.com/image.jpg' },
7. ]
8. }
9. }
复制代码

📌 4. 路由和 URL 结构优化

确保页面的 URL 是 友好的 和 轻便的，克制出现动态的、不易辨认的 URL（如带有复杂查询参数的 URL）。
利用 Vue Router 的路由重定向功能来确保 URL 规范。

✅ 办理方案：

利用 SEO 友好的 URL，克制利用过多的查询参数。
在 Vue Router 中设置 动态路由，为每个页面提供一个独特且轻便的路径。

📌 5. 进步页面加载速率

页面加载速率 是影响 SEO 排名的告急因素，尤其是 Core Web Vitals 中的 Largest Contentful Paint (LCP) 。
淘汰 JavaScript 文件巨细、实现懒加载和异步加载静态资源，能有用提拔性能。

✅ 办理方案：

利用 代码分割（Code Splitting） 来减小 JavaScript 的初始加载体积。
实现 懒加载：如对图片和路由举行懒加载。
利用 Vite 或 Webpack 的性能优化插件，如 Tree Shaking、压缩和 代码分割。

📌 6. 利用结构化数据（Schema Markup）

结构化数据有助于搜索引擎更好地明确网页内容并增强搜索效果中的展示（如丰富择要、星级评价等）。
在 Vue 中，可以通过 <script type="application/ld+json"> 标签嵌入 JSON-LD 结构化数据。

✅ 办理方案：

在页面中嵌入 JSON-LD 结构化数据，提拔搜索引擎对内容的明确。
示例：
1. <script type="application/ld+json">
2. {
3. "@context": "https://schema.org",
4. "@type": "WebPage",
5. "name": "页面标题",
6. "description": "页面描述",
7. "url": "https://example.com/page"
8. }
9. </script>
复制代码

📌 7. 确保页面可访问性

确保网站内容 可以被搜索引擎爬虫索引，而且 没有克制爬虫抓取的技能（如 JavaScript 渲染的内容）。
通过 robots.txt 和 meta robots 标签来控制哪些页面允许被索引。

✅ 办理方案：

设置 robots.txt 来管理搜索引擎爬虫的访问权限。
在须要克制索引的页面上添加 <meta name="robots" content="noindex, nofollow"> 标签。

📌 8. 利用 CDN 加速静态资源

利用 CDN（内容分发网络）加速静态资源（如图片、CSS、JS 文件）的加载，进步页面加载速率。

✅ 办理方案：

将 图片、字体、样式表 等静态资源托管在 CDN 上，进步访问速率。

📌 9. 定期更新和内容优化

连续更新网站内容，并确保内容的 干系性 和质量。
接纳 内容营销，如优化博客文章、产物形貌等，增长页面的 关键词密度，进步排名。

📌 10. 总结：Vue 项目的 SEO 优化

在 Vue 项目中优化 SEO，起主要办理 客户端渲染 带来的题目，通过 SSR 或 SSG 技能（如 Nuxt.js），共同动态 meta 标签、公道的 URL 结构和页面加载优化，提拔 SEO 排名和用户体验。同时，优化网站性能、利用结构化数据以及定期更新内容，能明显进步页面的可搜索性和可见性。
65.echarts有用过吗？常用的组件有哪些

是的，ECharts 是一个基于 JavaScript 的开源图表库，广泛用于数据可视化，提供了丰富的图表范例和机动的设置。它可以用于展示各种范例的数据，而且支持交互和动态更新，恰当在前端项目中举行数据展示。
常用的 ECharts 组件：

图表范例（Charts Types） ECharts 支持多种图表范例，可以根据差别的数据展示需求选择差别的图表。
- 折线图 (Line Chart) ：展示趋势数据的厘革，常用于时间序列分析。
- 柱状图 (Bar Chart) ：用于展示各类数据的对比。
- 饼图 (Pie Chart) ：表现各部分占比，恰当展示比例关系。
- 散点图 (Scatter Plot) ：用于展示数据的分布关系，适实用于大规模数据的可视化。
- 雷达图 (Radar Chart) ：多维度展示数据，恰当对比多个种别。
- K线图 (Candlestick Chart) ：用于金融范畴的股票、期货等数据展示。
- 舆图 (Map) ：地理信息数据可视化，支持展示地区信息。
- 仪表盘 (Gauge Chart) ：用于展示某些度量值的及时进度。
坐标系（Coordinate System）
- 直角坐标系 (Cartesian Coordinate System) ：最常见的坐标系范例，实用于折线图、柱状图等。
- 极坐标系 (Polar Coordinate System) ：实用于雷达图等。
- 地理坐标系 (Geo Coordinate System) ：用于舆图数据展示。
系列（Series）
- line：折线图系列。
- bar：柱状图系列。
- pie：饼图系列。
- scatter：散点图系列。
- radar：雷达图系列。
- map：舆图系列。
- gauge：仪表盘系列。
交互（Interactive Features）
- toolbox：工具箱，提供比方放大、缩小、切换图表范例等功能。
- tooltip：提示框，在鼠标悬停时表现数据详情。
- legend：图例，表现各数据系列的名称。
- dataZoom：数据地区缩放，用户可以通过拖动或滚动来缩放数据。
- markLine：标志线，表现数据中的特定标志位置。
- markPoint：标志点，用于突出表现特定命据点。
轴（Axis）
- xAxis：横坐标轴，通常用于展示时间、分类或其他数值。
- yAxis：纵坐标轴，表现数据值。
- polar：用于雷达图的极坐标轴。
视觉映射（Visual Mapping）
- color：颜色映射，常用于饼图、散点图等中，资助可视化展示差别的数据范围。
- size：巨细映射，根据数据的巨细厘革来调解表现的图形巨细。
动画（Animation）
- ECharts 支持各种动画效果，可以在加载图表时利用动画举行过渡，增长可视化的动态感。
自界说样式和主题（Custom Styling and Themes）
- ECharts 提供了机动的主题设置，开辟者可以自界说样式，如颜色、字体、边框等，也可以利用内置的主题。

ECharts 常勤劳能总结：

数据绑定与动态更新：ECharts 支持及时数据更新，可以利用 JavaScript 动态改变图表的展示内容，恰当展示及时厘革的数据表现。
相应式结构：支持根据容器巨细主动调解图表尺寸，顺应差别的装备屏幕。
事故处置处罚：可以为图表绑定事故（如点击、鼠标移入、拖动等），用于触发差别的交互效果。
多图表结构：支持在同一页面上展示多个图表，而且可以通过设置调解每个图表的表现位置和巨细。
数据透视与过滤：通过 toolbox 和 dataZoom 等组件实现数据的筛选和缩放，方便检察更具体的数据内容。

总结：

ECharts 是一个功能丰富、易于设置和高效的图表库。常用的组件包罗各种图表范例（如折线图、柱状图、饼图等）、交互功能（如工具箱、提示框）、以及数据更新和动画等。通过公道利用这些组件，可以或许实现丰富的可视化效果，提拔用户体验。
66.snabbdom是干什么的

Snabbdom 是一个假造 DOM（Virtual DOM）库，用于高效地更新和渲染 DOM。它的焦点理念是最小化 DOM 厘革，从而进步性能。
告急特点：

轻量级：焦点库只有几百行代码，压缩后约莫 2KB，非常恰当高性能应用。
模块化：提供丰富的模块（如类名操纵、事故监听、样式绑定等），可以自由扩展。
高效的 Diff 算法：利用 双端 Diff 算法，能快速对比新旧假造 DOM 并更新真实 DOM。
函数式 API：不依靠框架，API 筹划简单清楚。

告急应用场景：

Vue 2.x 的假造 DOM 实现：Vue 2.x 内部利用 Snabbdom 作为焦点假造 DOM 处置处罚库。
轻量级 Web UI 渲染：如果不想利用 React 或 Vue，但仍旧须要高效的假造 DOM 更新，Snabbdom 是个不错的选择。
自界说前端框架：Snabbdom 提供了底子的假造 DOM 机制，可用于构建自界说前端框架。

利用示例：

import { init } from "snabbdom";
import h from "snabbdom/h";
// 初始化 patch 函数（引入默认模块）
const patch = init([]);
// 创建虚拟节点
const vnode = h("div#container", [
h("h1", "Hello Snabbdom!"),
h("p", "This is a lightweight virtual DOM library."),
]);
// 挂载到真实 DOM
const app = document.getElementById("app");
patch(app, vnode);

复制代码

Vue 3 为什么不消 Snabbdom？

Vue 3 放弃 Snabbdom，改用自研的假造 DOM 机制（基于 block tree optimization 的 Diff 算法），以提拔性能和机动性。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告

vue口试宝典之二

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

王國慶