vue3+ts面试题（一）JSX，SFC

1. JSX和SFC的主要区别在哪里？
2. 不论你是写JSX还是SFC，你到底在写什么呢？
3. 有什么是JSX无法实现的功能？
4. 你更喜欢JSX还是SFC？
5. Vue3的JSX和React的JSX有什么区别

答案：

1. JSX 与 SFC 的核心区别

• JSX 是 JavaScript 语法扩展，将 HTML 嵌入 JS，本质是渲染函数的语法糖；SFC 是 Vue 独有的单文件组件（.vue），通过<template> <script> <style>分离结构、逻辑、样式。
• 核心差异：JSX 是 “语法层面的混合”，SFC 是 “文件层面的分离”。

2. 本质上在写什么？

都是在描述 “组件的渲染逻辑、交互行为和样式规则”，最终都会被编译为渲染函数，生成虚拟 DOM，再映射为真实 DOM。

3. JSX 无法直接实现的功能

• Vue 模板的静态编译优化（如静态节点提升）；
• SFC 的 scoped 样式隔离（JSX 需依赖 CSS-in-JS）；
• Vue 指令的原生便捷性（如v-model双向绑定、v-if条件渲染的模板语法）。

4. 偏好？

无绝对偏好，看场景：

• 复杂动态逻辑（如动态表单生成）选 JSX，灵活性高；
• 常规业务组件选 SFC（Vue），结构清晰，样式隔离天然支持。

5. Vue3 JSX 与 React JSX 的区别（结合场景）

1. 属性与事件：

   • React 用className onClick；Vue 用class onClick，且支持事件修饰符（如onClick:stop）。场景：迁移代码时需注意属性名转换，避免样式失效或事件冒泡问题。

2. 双向绑定：

   • React 需手动写value+onChange；Vue 支持v-model={[value, 'modelValue']}，自定义组件可直接v-model:prop。场景：表单开发中 Vue JSX 更简洁，尤其多字段联动时。

3. 插槽：

   • React 通过 props 传元素；Vue 用v-slots={{ default: () => <div/> }}。场景：封装复杂组件（如 Modal）时，Vue 的插槽语法更符合组件设计思路。

4. 指令支持：

   • Vue JSX 可直接用v-if v-for（需 Babel 插件）；React 依赖三元表达式 /map。场景：条件渲染嵌套较深时，Vue 的v-if比 React 的逻辑表达式更易读。

核心原则：框架生态优先，场景适配为要，无优劣之分，关键是理解底层编译逻辑和框架设计理念。