vue相关面试题

1. 设计vue项目按钮权限有哪几种常用方式，并给出代码示例。

使用v-if或v-show指令结合计算属性控制按钮的显示与隐藏。

export default {
  computed: {
    canAddUser() {
      const permissions = getUserPermissions();
      return permissions.includes('add_user');
    }
  }
}

<!-- 在模板中使用计算属性控制按钮的显示与隐藏 -->
<button v-if="canAddUser">添加用户</button>

使用自定义指令控制按钮的显示与隐藏。

// 注册一个自定义指令
Vue.directive('permission', {
  inserted: (el, binding) => {
    const permissions = getUserPermissions();
    const requiredPermission = binding.value;
    // 判断用户是否有权限
    if (!permissions.includes(requiredPermission)) {
      // 没有权限，隐藏按钮
      el.style.display = 'none';
    }
  }
});

<!-- 在模板中使用指令控制按钮的显示与隐藏 -->
<button v-permission="'add_user'">添加用户</button>

2. vue3的hook在设计思路上与vue2的mixin有什么不同？

vue3的hook在设计思路上与vue2的mixin有以下不同：

作用域不同：vue3的hook是在组件内部使用的，它是针对组件的，而vue2的mixin是在组件之间共享的，它是针对组件的。
使用方式不同：vue3的hook是通过函数的方式来使用的，它是通过函数的方式来定义和使用的，而vue2的mixin是通过对象的方式来使用的，它是通过对象的方式来定义和使用的。
组合方式不同：vue3的hook是通过组合的方式来使用的，它是通过组合的方式来组合多个hook，而vue2的mixin是通过混入的方式来使用的，它是通过混入的方式来混入多个mixin。
生命周期不同：vue3的hook是通过生命周期钩子来使用的，它是通过生命周期钩子来定义和使用的，而vue2的mixin是通过生命周期钩子来使用的，它是通过生命周期钩子来混入多个mixin。
代码复用不同：vue3的hook是通过代码复用的方式来使用的，它是通过代码复用的方式来复用多个hook，而vue2的mixin是通过代码复用的方式来使用的，它是通过代码复用的方式来复用多个mixin。
逻辑复用不同：vue3的hook是通过逻辑复用的方式来使用的，它是通过逻辑复用的方式来复用多个hook，而vue2的mixin是通过逻辑复用的方式来使用的，它是通过逻辑复用的方式来复用多个mixin。

3. vue3组件中通讯的方式

vue3组件中通讯的方式有以下几种：

props：父组件通过 props 向子组件传递数据。
$emit：子组件通过$ emit 触发事件，父组件通过 v-on 监听事件。
$attrs 和$ listeners：父组件通过 $attrs 向子组件传递属性，子组件通过$ listeners 监听事件。
provide 和 inject：父组件通过 provide 向子组件传递数据，子组件通过 inject 注入数据。
ref 和 reactive：通过 ref 和 reactive 创建响应式数据，实现组件之间的通讯。
EventBus：通过 EventBus 实现组件之间的通讯。
Vuex：通过 Vuex 实现组件之间的通讯。
localStorage：通过 localStorage 实现组件之间的通讯。
sessionStorage：通过 sessionStorage 实现组件之间的通讯。
cookie：通过 cookie 实现组件之间的通讯。

4. 概括vue中的data为什么是一个函数？

vue中的data是一个函数，是为了保证每个组件实例都有自己的数据副本，避免数据共享导致的数据混乱。当data是一个对象时，所有的组件实例都会共享同一个数据副本，当一个组件实例修改数据时，其他组件实例的数据也会被修改，导致数据混乱。为了避免这种情况，vue中的data是一个函数，每个组件实例都会调用这个函数来获取自己的数据副本，保证数据的独立性。通过这种方式，可以避免数据共享导致的数据混乱，保证数据的独立性，提高了组件的可维护性和可复用性。

5. vue虚拟dom的原理

vue虚拟dom的原理是通过虚拟dom树来实现的，虚拟dom树是一个树状结构，它包括节点、属性、文本等信息，通过虚拟dom树可以实现对真实dom的操作，包括创建、更新、删除等操作。虚拟dom树是一个轻量级的数据结构，它可以在内存中进行操作，然后通过diff算法对比新旧虚拟dom树的差异，最后通过patch算法将差异应用到真实dom上，从而实现对真实dom的操作。通过虚拟dom树可以实现对真实dom的高效操作，提高了页面的性能和用户体验。

虚拟dom的实现原理主要包括以下三部分：

虚拟dom树的创建：通过模板编译生成虚拟dom树。
虚拟dom树的更新：通过响应式数据更新虚拟dom树。
虚拟dom树的渲染：通过diff算法对比新旧虚拟dom树的差异，然后通过patch算法将差异应用到真实dom上。

6. vue3虚拟DOM和vue2有什么区别？

vue3虚拟DOM和vue2虚拟DOM有以下2个不同：

vue3中的虚拟DOM使用了静态标记，可以更加高效地处理静态结点，进行渲染和更新。
vue3中的虚拟DOM支持了Fragments，可以更加高效地处理多个根结点，进行渲染和更新。

7. vue的响应式原理概括

vue的响应式原理是通过Object.defineProperty或Proxy来实现的，它通过劫持数据的get和set方法，实现对数据的监听和更新。当数据发生变化时，会触发对应的更新操作，从而实现数据和视图的同步。vue的响应式原理主要包括以下几个步骤：

初始化：通过Object.defineProperty或Proxy来劫持数据的get和set方法，实现对数据的监听和更新。
依赖收集：当数据被访问时，会收集对应的依赖，将依赖和数据建立关联。
数据变更：当数据发生变化时，会触发对应的更新操作，从而实现数据和视图的同步。
视图更新：当数据发生变化时，会触发对应的视图更新，从而实现数据和视图的同步。

8. vue3的响应式原理和vue2有什么区别？

vue3的响应式原理和vue2的响应式原理有以下几个不同：

vue3使用了Proxy来实现响应式，而vue2使用了Object.defineProperty来实现响应式。
vue3的响应式原理更加高效，性能更好，支持了更多的特性，如Fragments、静态标记等。
vue3的响应式原理更加灵活，支持了更多的特性，如Fragments、静态标记等。
vue3的响应式原理更加简单，易于理解和使用，提高了开发效率和维护性。

9. proxy相对于Object.defineProperty的优势有哪些？

proxy相对于Object.defineProperty的优势有以下几个：

proxy可以直接监听对象而非属性，可以监听数组的变化。
proxy的拦截方式更加丰富，可以拦截更多的操作，如has、deleteProperty、ownKeys等。
proxy返回的是一个新对象，可以直接监听对象而非属性，不需要对每个属性进行遍历。
proxy可以直接监听数组的变化，不需要对数组的方法进行重写。

10. vue3的diff算法相较于vue2有什么优化？

vue3的diff算法相较于vue2有以下几个优化：

vue3的diff算法使用了静态标记，可以更加高效地处理静态结点，进行渲染和更新。
vue3的diff算法支持了Fragments，可以更加高效地处理多个根结点，进行渲染和更新。
vue3的diff算法使用了动态规划，可以更加高效地处理动态结点，进行渲染和更新。
vue3的diff算法使用了双端比较，可以更加高效地处理动态结点，进行渲染和更新。
vue3的diff算法使用了缓存策略，可以更加高效地处理动态结点，进行渲染和更新。

11. computed和watch的区别和运用场景

computed和watch的区别和运用场景如下： computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值； watch：更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；运用场景：

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

12. 怎么理解vue的单向数据流？

vue的单向数据流是指数据的流动是单向的，从父组件流向子组件，子组件不能直接修改父组件的数据。这样做的好处是可以更好地控制数据的流动，避免数据的混乱和不可预测性。通过单向数据流，可以更好地管理数据的状态，提高了组件的可维护性和可复用性。

13. vue中key的作用

vue中key的作用是为了更高效的更新虚拟DOM，它的作用是标识虚拟DOM的唯一性，当虚拟DOM发生变化时，vue会根据key的变化来判断是否需要更新虚拟DOM。通过key的作用，可以更高效地更新虚拟DOM，提高了页面的性能和用户体验。

14. vue中v-model的原理

vue中v-model的原理是通过v-bind和v-on来实现的，它通过v-bind绑定value属性，通过v-on绑定input事件，实现了数据的双向绑定。当输入框的值发生变化时，会触发input事件，从而更新数据，当数据发生变化时，会更新输入框的值，从而实现了数据的双向绑定。通过v-model的原理，可以更方便地实现数据的双向绑定，提高了开发效率和维护性。

15. vue中父组件如何监听到子组件的生命周期？

vue中父组件可以通过v-on监听子组件的生命周期，通过v-on可以监听子组件的生命周期钩子，从而实现对子组件的生命周期的监听。通过v-on监听子组件的生命周期，可以更好地控制子组件的生命周期，提高了组件的可维护性和可复用性。代码示例：

<template>
  <child-component @hook:mounted="handleMounted"></child-component>
</template>

<script>
export default {
  methods: {
    handleMounted() {
      console.log('子组件的mounted生命周期钩子被触发了');
    }
  }
}
</script>

16. keep-alive的理解以及常规用途

keep-alive的理解：keep-alive是vue的内置组件，用于缓存组件的状态，当组件被切换时，不会销毁组件，而是将组件缓存起来，下次再次使用时，直接从缓存中取出，提高了组件的性能和用户体验。用途：

缓存组件的状态，提高组件的性能和用户体验。
避免组件的重复渲染，提高了页面的性能和用户体验。
控制组件的生命周期，提高了组件的可维护性和可复用性。

17. nextTick的原理及使用场景

在 Vue2 当中，nextTick 可以理解为就是收集异步任务到队列当中并且开启异步任务去执行它们。它可以同时收集组件渲染的任务，以及用户手动放入的任务。组件渲染的任务是由 watcher 的 update 触发，并且将回调函数包装为异步任务，最后推到 nextTick 的队列里，等待执行。而在 Vue3 当中，nextTick 则是利用 promise 的链式调用，将用户放入的回调放在更新视图之后的 then 里面调用，用户调用多少次 nextTick，就接着多少个 then。

18. vue中的路由守卫

vue中的路由守卫是用来控制路由跳转的，它可以在路由跳转前、路由跳转后、路由跳转中等不同的阶段进行拦截和处理。vue中的路由守卫主要包括以下几个：

全局前置守卫：beforeEach
全局解析守卫：beforeResolve
全局后置钩子：afterEach
路由独享的守卫：beforeEnter
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 通过路由守卫，可以更好地控制路由的跳转，提高了页面的安全性和用户体验。

19. vuex数据流向

vuex的数据流向是单向的，从state到view，从view到mutation，从mutation到state，从state到view，依次循环。vuex的数据流向主要包括以下几个部分：

state：存储数据的地方，是唯一的数据源。
view：视图层，用来展示数据。
mutation：更改数据的地方，是唯一可以更改state的地方。
action：提交mutation，可以包含任意异步操作。
getter：从state中派生出一些状态，类似于计算属性。通过vuex的数据流向，可以更好地管理数据的状态，提高了组件的可维护性和可复用性。

20. axios是如何实现请求拦截和响应拦截的？

axios是通过拦截器interceptor来实现请求拦截和响应拦截的，它通过拦截器来对请求和响应进行处理，从而实现请求拦截和响应拦截。axios的拦截器主要包括以下两个部分：

请求拦截器：通过请求拦截器可以对请求进行处理，如添加请求头、添加token等。
响应拦截器：通过响应拦截器可以对响应进行处理，如处理错误信息、处理loading等。通过axios的拦截器，可以更好地处理请求和响应，提高了请求的可维护性和可复用性。

可以通过 axios.interceptors.request.use() 方法添加请求拦截器，通过 axios.interceptors.response.use() 方法添加响应拦截器。拦截器可以在请求或响应被发送前或接收后对其进行处理，比如添加请求头、修改请求参数、处理响应数据等。

21. vue-Router有几种模式？

vue-Router有两种模式：hash模式和history模式。

hash模式：使用 URL 的 hash 来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载。
history模式：使用 HTML5 History API 来实现，当 URL 改变时，页面会重新加载。

金三银四这些vue面试题都会了吗