Vue 3 、Vue 3.2 常见的面试问题及其回答

准备 Vue 3 面试时，以下是一些常见的面试问题及其回答，这些问题涵盖了基础知识、组件、状态管理、性能优化等方面。

基础知识

1. Vue 3 和 Vue 2 的主要区别是什么？

   • Vue 3 引入了组合式 API（Composition API），它允许我们更好地组织和复用代码。
   • Vue 3 使用 Proxy 代替 Vue 2 的 Object.defineProperty 实现响应式数据，使性能和可维护性更好。
   • Vue 3 的 Tree Shaking 更强，可以减少打包体积。
   • 更好的 TypeScript 支持。

2. 什么是组合式 API（Composition API）？

   • 组合式 API 是 Vue 3 中引入的一种新的 API，用于创建和组织组件的逻辑。它通过 setup 函数使得代码更容易复用和维护。

   import { ref } from 'vue';
   
   export default {
     setup() {
       const count = ref(0);
       const increment = () => {
         count.value++;
       };
       return { count, increment };
     }
   };
   

3. 什么是 Vue 3 中的 ref 和 reactive？

   • ref 用于创建一个响应式的数据对象，通常用于处理基本类型的数据。
   • reactive 用于创建一个深层响应式的数据对象，适用于复杂的对象结构。

   import { ref, reactive } from 'vue';
   
   const count = ref(0);
   const state = reactive({ count: 0 });
   

组件

4. 如何在 Vue 3 中定义一个组件？

   • 可以使用传统的对象定义组件或使用组合式 API 定义组件。

   import { defineComponent, ref } from 'vue';
   
   export default defineComponent({
     setup() {
       const message = ref('Hello, Vue 3!');
       return { message };
     }
   });
   

5. 父子组件如何通信？

   • 父组件可以通过 props 向子组件传递数据，子组件通过 $emit 向父组件发送事件。

   // 父组件
   <template>
     <ChildComponent :message="parentMessage" @childEvent="handleEvent" />
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: { ChildComponent },
     data() {
       return { parentMessage: 'Hello from parent' };
     },
     methods: {
       handleEvent(payload) {
         console.log('Event received:', payload);
       }
     }
   };
   </script>
   
   // 子组件
   <template>
     <div>{{ message }}</div>
     <button @click="$emit('childEvent', 'Hello from child')">Send Event</button>
   </template>
   
   <script>
   export default {
     props: ['message']
   };
   </script>
   

状态管理

6. Vuex 是什么？

   • Vuex 是 Vue.js 的状态管理模式。它集中式地管理应用的所有组件的状态，使得状态管理更加规范和高效。

7. 如何在 Vue 3 中使用 Vuex？

   • 首先安装 Vuex，然后在项目中创建和使用 Store。

   import { createStore } from 'vuex';
   
   const store = createStore({
     state() {
       return {
         count: 0
       };
     },
     mutations: {
       increment(state) {
         state.count++;
       }
     }
   });
   
   export default store;
   
   // 在 main.js 中
   import { createApp } from 'vue';
   import App from './App.vue';
   import store from './store';
   
   createApp(App).use(store).mount('#app');
   

性能优化

8. 如何优化 Vue 3 应用的性能？

   • 使用异步组件和懒加载。
   • 避免不必要的重渲染，通过使用 v-once、v-memo 和 computed。
   • 使用 Vue 3 的内置性能工具，如 Devtools 和 performance.mark。

9. 什么是异步组件，如何使用？

   • 异步组件是在需要时才加载的组件，常用于优化首屏加载性能。

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

其他

10. 如何处理 Vue 3 中的生命周期钩子？
    • Vue 3 中的生命周期钩子可以在组合式 API 的 setup 函数中使用对应的钩子函数。

    import { onMounted, onUnmounted } from 'vue';
    
    export default {
      setup() {
        onMounted(() => {
          console.log('Component mounted');
        });
        
        onUnmounted(() => {
          console.log('Component unmounted');
        });
      }
    };
    

Vue 3.2 引入了一些新的功能和改进，增强了开发者的体验和应用的性能。以下是 Vue 3.2 新增的一些主要属性和功能：

1. <script setup>

<script setup> 是一个编译器宏，用于在单文件组件 (SFC) 中编写组合式 API，语法更简洁，且无需显式返回。

<template>
  <div>{{ msg }}</div>
</template>

<script setup>
import { ref } from 'vue';

const msg = ref('Hello, Vue 3.2!');
</script>

2. 响应式语法糖

Vue 3.2 引入了对 ref 和 reactive 的解构支持，使得在模板中使用这些响应式变量时更加便捷。

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script setup>
import { ref } from 'vue';

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

3. <Suspense> 改进

<Suspense> 组件用于处理异步加载的组件，Vue 3.2 对其做了改进，支持多个 v-slot。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

4. 新的 defineExpose API

defineExpose 允许在使用 <script setup> 时显式暴露属性或方法给父组件。

<template>
  <ChildComponent ref="childRef" />
</template>

<script setup>
import { ref } from 'vue';

const childRef = ref(null);

const callChildMethod = () => {
  childRef.value.exposedMethod();
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>Child Component</div>
</template>

<script setup>
const exposedMethod = () => {
  console.log('Exposed method called');
};

defineExpose({ exposedMethod });
</script>

5. v-memo 指令

v-memo 是一个新的指令，用于缓存模板中的部分内容，避免不必要的重渲染。

<template>
  <div v-memo="[count % 2 === 0]">
    {{ count }}
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

6. 新的生命周期钩子

引入了新的 onRenderTracked 和 onRenderTriggered 钩子，用于调试和性能优化。

import { onRenderTracked, onRenderTriggered } from 'vue';

onRenderTracked((e) => {
  console.log('Render tracked:', e);
});

onRenderTriggered((e) => {
  console.log('Render triggered:', e);
});

7. useCssModule API

useCssModule 允许在 <script setup> 中使用 CSS 模块。

<template>
  <div :class="$style.container">Hello, Vue 3.2!</div>
</template>

<script setup>
const $style = useCssModule();
</script>

<style module>
.container {
  color: red;
}
</style>

8. useAttrs 和 useSlots API

useAttrs 和 useSlots 允许在 <script setup> 中访问组件的属性和插槽。

<template>
  <div v-bind="attrs">{{ slots.default() }}</div>
</template>

<script setup>
import { useAttrs, useSlots } from 'vue';

const attrs = useAttrs();
const slots = useSlots();
</script>

9. <style scoped> 改进

Vue 3.2 对 <style scoped> 做了改进，允许在 <style scoped> 中使用深层选择器 >>> 或 /deep/。

<template>
  <div class="parent">
    <ChildComponent />
  </div>
</template>

<style scoped>
.parent >>> .child {
  color: red;
}
</style>

这些新功能和改进使得 Vue 3.2 更加强大和易用，帮助开发者更高效地构建现代化的 Web 应用。