Vue3 面试题

<script setup>
// defineProps 带默认值
const props = withDefaults(defineProps({
  title: String,
  size: { type: Number }
}), {
  title: '默认标题',
  size: 14
})

// defineEmits
const emit = defineEmits(['submit', 'cancel'])

// defineExpose
defineExpose({ reset: () => form.value = {} })
</script>

<!-- 父组件 Parent.vue -->
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const count = ref(0)
const handleAdd = (val) => { count.value += val }
</script>

<template>
  <p>父组件 count：{{ count }}</p>
  <Child :count="count" @add="handleAdd" />
</template>

<!-- 子组件 Child.vue -->
<script setup>
defineProps({ count: Number })
const emit = defineEmits(['add'])
</script>

<template>
  <p>子组件接收 count：{{ count }}</p>
  <button @click="emit('add', 1)">+1</button>
</template>

<!-- 父组件 -->
<script setup>
import { ref } from 'vue'
const name = ref('Tom')
const age = ref(18)
</script>

<template>
  <!-- 单个 v-model -->
  <MyInput v-model="name" />
  <!-- 多个 v-model（Vue3 新增） -->
  <UserForm v-model:name="name" v-model:age="age" />
</template>

<!-- 子组件 MyInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<!-- 子组件 FormComp.vue -->
<script setup>
import { ref } from 'vue'

const form = ref({ name: '', age: '' })

function reset() {
  form.value = { name: '', age: '' }
}

// 必须显式暴露，<script setup> 默认不对外暴露任何内容
defineExpose({ reset })
</script>

<!-- 父组件 -->
<script setup>
import { ref } from 'vue'
import FormComp from './FormComp.vue'

const formRef = ref(null)

function handleReset() {
  formRef.value.reset()  // 调用子组件暴露的方法
}
</script>

<template>
  <FormComp ref="formRef" />
  <button @click="handleReset">重置表单</button>
</template>

<!-- 祖先组件 App.vue -->
<script setup>
import { ref, provide } from 'vue'

const theme = ref('dark')
function toggleTheme() {
  theme.value = theme.value === 'dark' ? 'light' : 'dark'
}

// 提供响应式数据和方法
provide('theme', theme)
provide('toggleTheme', toggleTheme)
</script>

<!-- 深层后代组件（无需中间层传递） -->
<script setup>
import { inject } from 'vue'

const theme = inject('theme')              // 响应式，随祖先变化自动更新
const toggleTheme = inject('toggleTheme')
</script>

<template>
  <div :class="theme">
    <p>当前主题：{{ theme }}</p>
    <button @click="toggleTheme">切换</button>
  </div>
</template>

<!-- 组件 A：修改数据 -->
<script setup>
import { useCounterStore } from '@/stores/useCounterStore'
const store = useCounterStore()
</script>
<template>
  <button @click="store.increment()">+1</button>
</template>

<!-- 组件 B（兄弟/任意层级）：读取数据 -->
<script setup>
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/useCounterStore'
const { count } = storeToRefs(useCounterStore())
</script>
<template>
  <p>共享 count：{{ count }}</p>
</template>

<!-- 发送方 ComponentA.vue -->
<script setup>
import { emitter } from '@/utils/emitter'

function sendMsg() {
  emitter.emit('user-login', { name: 'Tom', role: 'admin' })
}
</script>
<template>
  <button @click="sendMsg">触发登录事件</button>
</template>

<!-- 接收方 ComponentB.vue（任意位置） -->
<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { emitter } from '@/utils/emitter'

function handleLogin(user) {
  console.log('收到登录事件：', user)
}

onMounted(() => emitter.on('user-login', handleLogin))
// ⚠️ 必须在卸载时移除监听，避免内存泄漏
onBeforeUnmount(() => emitter.off('user-login', handleLogin))
</script>

<script setup>
import { ref, computed } from 'vue'
import ChildComp from './ChildComp.vue'

// 直接可在模板中使用，无需 return
const count = ref(0)
const double = computed(() => count.value * 2)

// 声明 props 和 emits
const props = defineProps({ title: String })
const emit = defineEmits(['update'])

// 暴露给父组件（通过 ref 调用）
defineExpose({ count, reset: () => count.value = 0 })
</script>

<!-- 父组件 -->
<MyInput v-model="name" />
<!-- 等价于 -->
<MyInput :modelValue="name" @update:modelValue="name = $event" />

<!-- 多个 v-model（Vue3 新增） -->
<UserForm v-model:name="name" v-model:age="age" />

<!-- 子组件 -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<!-- 缓存所有子组件 -->
<keep-alive>
  <component :is="currentTab" />
</keep-alive>

<!-- 只缓存指定组件 -->
<keep-alive include="['HomeView', 'UserList']" :max="10">
  <RouterView />
</keep-alive>

<template>
  <button @click="open = true">打开弹窗</button>

  <!-- 将弹窗渲染到 body 下，而非当前组件 DOM 内 -->
  <Teleport to="body">
    <div v-if="open" class="modal">
      <p>这是弹窗</p>
      <button @click="open = false">关闭</button>
    </div>
  </Teleport>
</template>

<Suspense>
  <!-- 异步组件加载完成后显示 -->
  <template #default>
    <AsyncUserPanel />
  </template>
  <!-- 加载中显示 -->
  <template #fallback>
    <LoadingSpinner />
  </template>
</Suspense>

<input v-focus />
<p v-color="'red'">红色文字</p>