Vue面试

Vue2 vs Vue3

1）响应式系统实现
Vue2：基于 Object.defineProperty 实现响应式，通过遍历对象的属性添加 getter/setter 监听变化。
局限性：
无法直接监听对象新增 / 删除的属性（需用 Vue.set/Vue.delete）；
无法监听数组通过索引修改的元素（如 arr[0] = 1）或长度变化（需用数组变异方法，如 push）。
Vue3：基于 Proxy 实现响应式，直接代理整个对象而非属性。
2）核心API风格
Vue2：以「选项式 API（Options API）」为主，将代码按功能（data、methods、computed、watch 等）拆分到不同选项中。
Vue3：新增「组合式 API（Composition API）」，允许按业务逻辑组织代码（而非功能），通过 setup 入口整合相关逻辑。
3）生命周期钩子
Vue2：生命周期钩子以选项形式存在（如 created、mounted、updated）。
Vue3：组合式 API 中，生命周期钩子需从 vue 导入并在 setup 中调用（如 onMounted、onUpdated）；移除 beforeCreate 和 created，其逻辑直接写在 setup 中（setup 执行时机等同于这两个钩子）。
4）模版语法增强
Vue3 对模板语法进行了扩展：
多根节点模板（Fragment）：组件模板不再强制要求单一根节点，避免多余的包裹 div；
更灵活的 v-model：支持自定义组件双向绑定的参数（如 v-model:title），可同时绑定多个属性；
v-if 与 v-for 优先级调整：v-if 优先级高于 v-for（Vue2 中相反），避免逻辑混淆；
5）类型支持
Vue2：通过 vue-class-component 等工具支持 TypeScript，但类型推断能力较弱，需大量手动声明。
Vue3：原生使用 TypeScript 开发，类型定义更完善，组合式 API 天然支持类型推断，开发体验更优。

Vue2是否可以实现逻辑复用？
为什么VCA对ts友好？
VCA有没有不合理的地方如何改进？

v-if和v-show的区别

核心区别：是否移除 DOM 元素，v-if 是「真正的条件渲染」（DOM 级操作），v-show 是「视觉上的条件显示」（CSS 级操作）。
v-if条件为false时，会直接从 DOM 中移除元素（包括其子元素），不会渲染到页面中；条件为 true 时，会重新创建元素并插入 DOM。
v-show条件为 false 时，元素不会从 DOM 中移除，只是通过 CSS 的 display: none 隐藏；条件为 true 时，通过 display 属性恢复显示。

vue watch和computed的区别

1）核心功能
computed（计算属性）,用于派生新数据，基于已有响应式数据计算得出一个新值。
watch（监听器），用于监听数据变化并执行副作用，当被监听的数据变化时，触发自定义逻辑。
2）依赖处理
computed：自动追踪依赖，当依赖变化时自动重新计算。
缓存机制：只有当依赖发生变化时，才会重新计算；多次访问相同依赖时，直接返回缓存结果，避免重复计算。
watch：需手动指定要监听的数据源。无缓存，数据变化时必定触发回调函数
3）语法差异
computed：必须定义为函数（或包含 get 方法的对象），且必须返回一个值，在模板中直接使用。
watch：可定义为函数、对象（配置 handler、deep、immediate 等）或数组（多个回调），无需返回值。

使用场景：
computed：
需要从现有数据派生新数据（如格式化、过滤、拼接等）。
依赖的数据源变化不频繁，但需要频繁访问计算结果（利用缓存提升性能）。
计算逻辑简单且纯粹（无副作用，仅返回新值）。
watch：
需要在数据变化时执行异步操作（如接口请求、定时器）。
需要执行复杂逻辑（如修改 DOM、操作第三方库）。
需要监听数据的深层变化（可通过 deep: true 配置）。
需要在初始加载时立即执行一次（通过 immediate: true 配置）。