刷刷题30(vue3常规面试题)

1. ‌Vue 3的组合式API(Composition API)与选项式API(Options API)的核心区别是什么?在什么场景下推荐使用组合式API?

  • ‌:
    组合式API通过setup()函数组织逻辑,允许按功能拆分代码(如ref, reactive, computed),解决选项式API中逻辑分散的问题(如datamethods分离)。
    适合复杂组件、逻辑复用(自定义Hook)或TypeScript项目,提升代码可维护性。

2. ‌Vue 3的响应式数据中,refreactive有什么区别?如何决定使用哪一个?

  • ‌:

    • ref:包装基本类型(如string, number),通过.value访问,可用于任何数据类型。
    • reactive:仅接收对象类型,自动深层响应式,直接访问属性,解构可能丢失响应性。
    • 选择 ‌:基本类型用ref;复杂对象用reactive,需保持引用时用toRefs解构。

3. ‌Vue 3中如何监听响应式数据的变化?watchwatchEffect有何区别?

  • ‌:

    • watch:需指定监听的具体数据源和回调,可配置immediatedeep
    • watchEffect:自动追踪回调内的依赖,立即执行,适用于依赖动态变化的场景。
    • 区别 ‌:watch精确控制依赖,watchEffect自动收集依赖,更简洁。

4. ‌Vue 3的setup函数中如何访问组件实例的propscontext

  • 答案 ‌:
    setup(props, context)

    • props:响应式对象,不可解构,需用toRefs保持响应性。
    • context:包含attrsslotsemit等非响应式属性。

5. ‌Vue 3的Teleport组件有什么作用?举一个实际应用场景。

  • ‌:

    作用 ‌:将子组件渲染到DOM的指定位置(如body末尾),解决模态框、弹窗的样式层级问题。

    示例‌:

ini 复制代码
<teleport to="#modal-container">
  <div v-if="showModal">模态框内容</div>
</teleport>

6. ‌Vue 3如何实现多个v-model绑定?

  • 通过给v-model添加参数:

ini 复制代码
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

子组件用emit('update:title', newValue)触发更新。

7. ‌解释Vue 3的响应式原理,对比Vue 2的Object.defineProperty

  • ‌:

    • Vue 3 ‌:使用Proxy代理对象,支持监听属性新增/删除、数组索引变化,无需递归初始化。
    • Vue 2 ‌:Object.defineProperty无法检测数组索引/对象属性增减,需用Vue.set

8. ‌Vue 3中如何优化组件渲染性能?举两个例子。

  • 答案‌:

    • v-memo‌:缓存静态内容,避免重复渲染。
css 复制代码
<div v-memo="[value]">{{ value }}</div>
  • 异步组件 ‌:使用defineAsyncComponent延迟加载非关键组件。
  • 优化策略 ‌:减少响应式数据嵌套、合理使用shallowRef/shallowReactive

9. ‌如何用Vue 3的自定义Hook实现逻辑复用?编写一个鼠标位置跟踪的Hook。

ini 复制代码
// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  const update = (e) => {
    x.value = e.clientX;
    y.value = e.clientY;
  };

  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));

  return { x, y };
}

// 组件内使用
const { x, y } = useMousePosition();

10. ‌Vue 3的<script setup>语法糖解决了哪些问题?举例说明其用法。

  • ‌:

    优势 ‌:简化组合式API的样板代码,自动暴露顶层变量。

    示例‌:

xml 复制代码
<script setup>
import { ref } from 'vue';
const count = ref(0);
// 直接使用,无需return
</script>
<template>
  <button @click="count++">{{ count }}</button>
</template>
相关推荐
IT_陈寒6 分钟前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
aklry9 分钟前
elpis之动态组件机制
javascript·vue.js·架构
井柏然13 分钟前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊39 分钟前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang1 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..1 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码
智能化咨询1 小时前
玩转ClaudeCode:通过Chrome DevTools MCP实现高级调试与反反爬策略
前端·chrome·chrome devtools
xjf77111 小时前
Nx项目中使用Vitest对原生JS组件进行单元测试
javascript·单元测试·前端框架·nx·vitest·前端测试
Roadinforest1 小时前
水墨风鼠标效果实现
前端·javascript·vue.js
银嘟嘟左卫门2 小时前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
前端