前端Vue3最常用的 20 道面试题总结(含详细解释和代码示例)

// Vue 3 示例：使用 Composition API
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    onMounted(() => {
      console.log('组件挂载');
    });
    return { count, increment };
  }
};

import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 25
});

import { ref, reactive } from 'vue';

const count = ref(0); // 基本类型
const user = reactive({ name: 'Bob' }); // 对象

count.value++; // 必须用 .value
user.name = 'Tom'; // 不需要 .value

import { ref, watchEffect, watch } from 'vue';

const count = ref(0);

// watchEffect
watchEffect(() => {
  console.log('Count changed:', count.value);
});

// watch
watch(count, (newVal, oldVal) => {
  console.log(`从 ${oldVal} 变为 ${newVal}`);
});

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });
  }
};

// 子组件 Child.vue
export default {
  props: ['title'],
  emits: ['update'],
  setup(props, { emit }) {
    function handleClick() {
      emit('update', 'New Value');
    }
    return { handleClick };
  }
};

// 父组件 Parent.vue
<template>
  <Child :title="msg" @update="handleUpdate" />
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  data() {
    return {
      msg: 'Hello'
    };
  },
  methods: {
    handleUpdate(value) {
      console.log('收到更新:', value);
    }
  }
};
</script>

export default {
  setup() {
    const message = ref('Hello Vue 3');
    function changeMessage() {
      message.value = 'Updated!';
    }
    return { message, changeMessage };
  }
};

import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  }
};

// 祖先组件
import { provide, ref } from 'vue';

export default {
  setup() {
    const theme = ref('dark');
    provide('theme', theme);
    return { theme };
  }
};

// 后代组件
import { inject } from 'vue';

export default {
  setup() {
    const theme = inject('theme');
    return { theme };
  }
};

<!-- 父组件 -->
<template>
  <Card>
    <template #default>这是默认插槽内容</template>
    <template #header>这是头部插槽</template>
  </Card>
</template>

<!-- 子组件 Card.vue -->
<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
  </div>
</template>

<template>
  <teleport to="body">
    <div v-if="showModal" class="modal">这是一个模态框</div>
  </teleport>
</template>

<template>
  <suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      加载中...
    </template>
  </suspense>
</template>
<script>
const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'));
</script>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps(['title']);
const emit = defineEmits(['update']);

function updateTitle() {
  emit('update', 'New Title');
}
</script>

<template>
  <h1>{{ title }}</h1>
  <button @click="updateTitle">更新标题</button>
</template>

<template>
  <div :style="{ backgroundColor: color }">{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'lightblue',
      text: '动态样式'
    };
  }
};
</script>

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import MyButton from './components/MyButton.vue';

const app = createApp(App);
app.component('MyButton', MyButton);
app.mount('#app');

<!-- 使用 -->
<template>
  <my-button label="提交" />
</template>

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('highlight', {
  mounted(el) {
    el.style.backgroundColor = '#f0e68c';
  }
});

app.mount('#app');

<!-- 使用 -->
<template>
  <p v-highlight>这段文字被高亮了</p>
</template>

import { nextTick } from 'vue';

async function updateData() {
  this.message = '更新后的内容';
  await nextTick();
  console.log('DOM 已更新');
}

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/LazyComponent.vue')
);

export default {
  components: {
    AsyncComponent
  }
};

npm install mitt

// eventBus.js
import mitt from 'mitt';
export const emitter = mitt();

// 发送事件
import { emitter } from './eventBus';
emitter.emit('update', 'Hello');

// 接收事件
import { emitter } from './eventBus';
emitter.on('update', (msg) => {
  console.log(msg);
});

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

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
};
</script>