VUE3常见面试题总结（看这一篇就够了）

Vue 3 是当前前端开发中一个非常流行的框架，许多企业在面试中会涉及到 Vue 3 的相关知识。以下是一些常见的面试题及其解答，帮助你更好地准备 Vue 3 的面试。

1. Vue 3 的新特性有哪些？

Vue 3 引入了一些重要的新特性，包括：

• Composition API：相较于 Options API，Composition API 提供了一种更灵活、更强大的方式来组织和重用逻辑。

示例： ```javascript

```

• Teleport：允许将子组件渲染到 DOM 的任何位置，而不仅仅是它们的父组件内部。

示例： html <template> <teleport to="body"> <div class="modal">这是一个模态框</div> </teleport> </template>

• Fragment：支持同级的多个根节点，不再只允许一个根元素。

示例： javascript <template> <> <h1>标题</h1> <p>内容</p> </template>

2. 什么是 Reactive 和 Ref？

在 Vue 3 中，响应式系统发生了改变，使用 reactive 和 ref 来创建响应式数据。

• reactive：用于对象类型的响应式。

示例： ```javascript import { reactive } from 'vue';

const state = reactive({ count: 0 });

const increment = () => { state.count++; }; ```

• ref：用于基本数据类型的响应式。

示例： ```javascript import { ref } from 'vue';

const count = ref(0);

const increment = () => { count.value++; }; ```

3. Vue 3 中的生命周期钩子有哪些变化？

Vue 3 中的生命周期钩子函数发生了一些变化，尤其是在 Composition API 中。以下是一些常见的生命周期钩子：

• onMounted：组件挂载后调用。
• onUpdated：组件更新后调用。
• onUnmounted：组件卸载前调用。

示例：

import { onMounted, onUnmounted } from 'vue';

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

    onUnmounted(() => {
      console.log('组件即将卸载');
    });
  }
}

4. 如何使用 Vue Router 和 Vuex？

在 Vue 3 中， Vue Router 和 Vuex 的使用方式与 Vue 2 略有不同。

Vue Router 示例：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

Vuex 示例：

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

结语

以上是一些 Vue 3 的常见面试问题及代码示例，掌握这些内容将帮助你在面试中展示你的 Vue 3 知识和技能。当然，建议多写代码，实际理解这些概念，才能在面试中游刃有余。希望你能顺利通过面试！