Vue3 与 TypeScript 相关的前端高频面试题。内容涵盖 Vue3 新特性（组合式 API、Proxy 响应式、Teleport 等）、Vue2 与 Vue3 的区别、常用指令（v-if/v-for/v-model）、生命周期、组件通信、路由模式（Hash/History）及守卫、HTTP 请求（Axios/Fetch）以及 TypeScript 基础类型、Interface/Type 区别和泛型应用。旨在帮助开发者梳理核心知识点，应对面试挑战。
Vue 是一个渐进式 JavaScript 框架。
Vue 3 主要新特性：
<script setup>)：在 <script> 中直接写变量，无需 setup 函数包裹。.native 修饰符已移除。@vue/runtime-core，用于创建自定义渲染器。<style> 中使用 v-bind。{{}}：大括号内为 JS 环境，支持三元表达式/拼接等。v-text/v-html：覆盖元素内容，慎用 v-html（XSS 风险）。v-cloak/v-pre/v-once：开发阶段常用，生产环境较少使用。v-bind：绑定属性数据，简写为 :。减少 DOM 操作。v-on：绑定事件。推荐函数名以 on 开头，定义在 methods 中。支持事件修饰符（stop, prevent）和键盘修饰符。v-for：遍历数组、对象或数字。key 的作用和原理见下文。优先级低于 v-if（Vue 3）。v-if/v-show：控制显示隐藏。区别见下文。v-memo：了解即可，用于缓存盒模型避免重复渲染。key 决定是替换、修改还是删除节点。v-for 优先于 v-if。v-if 总是优先于 v-for 生效，以减少不必要的渲染。v-if 是真正的条件渲染，切换时会销毁/重建事件监听器和子组件，惰性渲染。v-show 始终渲染元素，仅通过 CSS display 属性切换。v-show。v-if。参考 React 的 memo，主要用于指定盒模型缓存，避免重复渲染。
Object.defineProperty，Vue 3 使用 Proxy。注：Vue 并非纯 MVVM 框架，但设计受其启发，文档中常使用
vm表示实例。
:class="data 中的键":class="{类名：布尔值}":class="[类名，... ]":style="{css 属性名：属性值}"它是 :value 和 @input 的语法糖。
通过 Object.defineProperty 劫持模型数据变化。
$forceUpdate 强制刷新，或使用 $set 单独写数据劫持。通过 Proxy 劫持模型数据变化。
Object.defineProperty 只能拦截对象属性，无法监听新增属性。Proxy 可拦截整个对象，支持 11 种拦截方式（get, set 等），可监听未定义属性。deep：深度监听对象类型数据（如 ElementUI 二次封装的 form）。immediate：立即执行监听（如面包屑首次打开显示对应菜单）。JS 主要用于操作 DOM 和用户交互。若多线程会导致 DOM 操作冲突（如同步问题）。HTML5 Web Worker 允许创建子线程，但不得操作 DOM，不改变 JS 单线程本质。
通过 JS 对象描述真实 DOM，减少同一时间内的多处修改触发的 Reflow 和 Repaint 次数。
tips：created 中可通过
this.$nextTick()操作 ref 元素。
destroyed 改为 unmounted。onRenderTracked, onRenderTriggered，created 改为 setup。数据由父组件传递给子组件，禁止子组件直接更改，需由父组件修改后重新传递。
组件实例化时多次复用，函数返回新对象避免数据共享污染。
<组件名 v-model="num2">:model-value="num2" @update:model-value="data => num2=data"path, component, name, redirect, alias, children, meta 等。
beforeEach（鉴权）。beforeEnter。beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave。addRoute 动态添加。存放面包屑、标识是否缓存组件等。
TS 是 JS 的超集，增加了静态类型系统，提升开发体验和代码健壮性。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online