vue3相关面试题

1. Vue3中，为什么要使用Composition API？😀

   答：Composition API 是一个全新的API，在之前的Vue 2.x中是不存在的。它的出现是为了解决Vue 2.x中的一些问题，比如逻辑复杂时单一组件代码难以维护。Composition API 可以将逻辑拆分为更小、更易于维护的函数。

2. Vue3中，如何创建一个组件？😀

   答：使用Vue3，你可以像Vue2一样使用对象形式和配置对象来创建一个组件，也可以使用composition API。例如，对象形式：

   const app = Vue.createApp({
     template: '<div>Hello, World!</div>'
   })
   
   app.mount('#app')
   

   配置对象形式：

   const MyComponent = {
     template: '<div>Hello, World!</div>'
   }
   
   app.component('my-component', MyComponent)
   

   Composition API形式：

   import { defineComponent } from 'vue'
   
   export default defineComponent({
     template: '<div>Hello, World!</div>'
   })
   

3. Vue3中，如何使用computed属性？😀

   答：使用Vue3，你可以直接使用composables中的 computed 函数来创建计算属性。例如：

   import { computed } from 'vue'
   
   export default {
     setup() {
       const count = ref(0)
       const double = computed(() => count.value * 2)
       return {
         count,
         double
       }
     }
   }
   

   在这个例子中，double 是一个 computed，它依赖 count.value，并在 count.value 发生变化时自动更新。

4. Vue3中，如何进行组件间通信？😀

   答：Vue3中，你可以使用 props 和 emit 实现父子组件之间的通信，使用 provide 和 inject 实现祖先到后代的通信，使用 ref 实现兄弟组件之间的通信。

   例如：使用 props 和 emit

   // 父组件
   <template>
     <div>
       <child-component :count="count" @add="handleAdd" />
     </div>
   </template>
   
   <script>
   import { ref } from 'vue'
   import ChildComponent from './ChildComponent.vue'
   
   export default {
     components: {
       ChildComponent
     },
     setup() {
       const count = ref(0)
       const handleAdd = () => {
         count.value++
       }
       return {
         count,
         handleAdd
       }
     }
   }
   </script>
   
   // 子组件
   <template>
     <div>
       {{ count }}
       <button @click="$emit('add')">Add</button>
     </div>
   </template>
   
   <script>
   import { defineComponent, props } from 'vue'
   
   export default defineComponent({
     props: {
       count: Number
     }
   })
   </script>
   

5. Vue3中，如何使用路由？😀

   答：在Vue3中使用Vue Router的过程与Vue2.x大致相同，只是有一些语法上的不同，比如不再需要使用Vue.use(VueRouter)。

   例如：

   import {createRouter, createWebHashHistory} from 'vue-router'
   
   const routes = [
     {
       path: '/',
       component: Home
     },
     {
       path: '/about',
       component: About
     }
   ]
   
   const router = createRouter({
     history: createWebHashHistory(),
     routes
   })
   
   export default router
   

6. Vue3中，如何使用vuex？😀

   答：Vuex是Vue官方提供的一个状态管理库，用于在大型应用程序中管理应用程序的状态。在Vue3中，你可以像Vue2一样使用Vuex。但是，使用方式略有不同，你需要使用createStore函数创建一个store，并在main.js中将其注入到Vue对象中。

   例如：

   // store.js
   import { createStore } from 'vuex'
   
   export default createStore({
     state: {
       count: 0
     },
     mutations: {
       increment (state) {
         state.count++
       }
     },
     actions: {
       increment (context) {
         context.commit('increment')
       }
     }
     getters: {
        getCount: (state) => state.count
      }
   })