刷刷题50（vue3)

‌1. Vue3 的响应式系统如何实现深度监听和自定义 Reactive 转换器？ ‌

• ‌深度监听 ‌：reactive 默认递归代理嵌套对象，而 shallowReactive 仅代理第一层属性，适用于性能敏感场景‌。

• ‌自定义转换器 ‌：通过 toRaw 获取原始对象，或使用 markRaw 标记对象跳过响应式处理，例如：

  const rawData = { id: 1 };
  const reactiveData = reactive(markRaw(rawData)); // rawData 不会被代理‌:ml-citation{ref="3,4" data="citationList"}。

---

‌2. 如何利用 effectScope 管理组合式 API 中的副作用（Side Effects）？ ‌

effectScope 用于集中管理 watch、computed 等副作用，避免内存泄漏：

import { effectScope } from 'vue';
const scope = effectScope();
scope.run(() => {
  const count = ref(0);
  watch(count, () => console.log('值变化'));
});
scope.stop(); // 停止所有副作用‌:ml-citation{ref="2,4" data="citationList"}。

‌场景‌：动态组件卸载时自动清理关联副作用‌。

---

‌3. 如何实现 Vue3 响应式数据的"序列化安全"？ ‌

• ‌问题 ‌：直接序列化 reactive 对象可能导致循环引用或冗余元数据。
• ‌解决方案 ‌：使用 toRefs 解构响应式对象，或通过 JSON.stringify(reactiveObj) 前调用 toRaw 获取原始数据‌34。

---

‌4. Vue3 如何通过 v-bind 在 CSS 中绑定动态值？如何处理组件作用域样式的穿透问题？ ‌

• ‌动态 CSS 值 ‌：在 <style> 中使用 v-bind 绑定响应式变量：

  <script setup>
  const color = ref('red');
  </script>
  <style>
  .text { color: v-bind(color); }
  </style>

• ‌样式穿透 ‌：使用 :deep() 修改子组件样式：

  :deep(.child-class) { color: blue; } /* 穿透到子组件‌:ml-citation{ref="2,6" data="citationList"} */

---

‌5. 如何利用自定义渲染器实现 Vue3 在 Canvas 或 WebGL 中的渲染？ ‌

通过 createRenderer 自定义节点操作逻辑：

const { createApp } = createRenderer({
  createElement: (tag) => canvas.createShape(tag),
  patchProp: (el, key, val) => el.setAttribute(key, val),
});
createApp(MyComponent).mount('#canvas-container');

‌应用场景‌：游戏界面、数据可视化大屏‌。

---

‌6. Vue3 的编译时性能优化策略有哪些？如何利用 @vue/compiler-sfc 进行自定义模板编译？ ‌

• ‌优化策略‌：

  • 静态节点提升（Hoist Static）为常量，跳过 Diff 比对‌。
  • 动态标记（Patch Flags）标识节点类型，减少运行时判断‌。

• ‌自定义编译 ‌：通过 compiler-sfc 解析 .vue 文件，修改 AST 实现自定义逻辑（如添加全局样式）‌。

---

‌7. 如何通过 watchEffect 的 onInvalidate 参数实现副作用清理？ ‌

onInvalidate 在副作用重新执行或组件卸载时触发清理逻辑：

watchEffect((onInvalidate) => {
  const timer = setTimeout(() => {}, 1000);
  onInvalidate(() => clearTimeout(timer)); // 清理定时器‌:ml-citation{ref="3,4" data="citationList"}。
});

---

‌8. Vue3 如何通过 defineExpose 控制组件暴露的属性和方法？ ‌

在 <script setup> 中，defineExpose 指定父组件可访问的内容：

<script setup>
const internalData = ref('secret');
defineExpose({ publicData: 'exposed' }); // 仅暴露 publicData‌:ml-citation{ref="2,6" data="citationList"}。
</script>

---

‌9. 如何结合 TypeScript 泛型与 reactive 实现强类型响应式对象？ ‌

通过泛型定义响应式对象结构：

interface User {
  id: number;
  name: string;
}
const user = reactive<User>({ id: 1, name: 'Alice' }); // 类型安全‌:ml-citation{ref="2,4" data="citationList"}。

---

‌10. Vue3 的异步组件加载如何结合 Suspense 实现错误边界（Error Boundary）？ ‌

通过 Suspense 的 onErrorCaptured 钩子捕获异步组件错误：

vueCopy Code
<template>
  <Suspense @error-captured="handleError">
    <AsyncComponent />
    <template #fallback>Loading...</template>
  </Suspense>
</template>
<script setup>
const handleError = (err) => { console.error(err); };
</script>

‌场景‌：统一处理接口请求失败或组件加载异常‌。