本文共 1421 字，大约阅读时间需要 4 分钟。

vue面试题

vue中组建之间如何通信？

在vue应用中，组件间的通信可以通过多种方式实现。父组件到子组件的通信通常采用自定义属性的方式，父组件通过自定义属性传递数据，而子组件通过props接收。反之，如果需要子组件向父组件传递数据，可以通过触发自定义事件来实现。对于跨组件之间的通信，推荐使用EventBus或Vuex来处理，这样可以避免直接的父子关系限制，实现更灵活的数据传递。

vuex和本地存储有什么区别？

vuex和本地存储在使用场景上有明显的区别。vuex的数据可以实时地在组件间共享并进行更新，而本地存储（如 localStorage、sessionStorage）则只能保存简单的键值对，且数据不会随着页面刷新或组件更新而自动刷新。因此，在需要实时数据共享与更新的情景下，vuex是更合适的选择。本地存储则适用于需要持久化保存数据且不需要实时更新的场景。

vuex 有哪些模块，并说明他们的作用？

vuex的核心结构包括以下几个模块：

1. state：这是vuex的基础模块，用于存储应用程序的状态变量。所有组件都可以通过state来访问这些变量并进行更新。

2. getters：getters是基于state的计算属性，它们可以将state中的数据进行转换，返回更有意义的值。通过定义getters，可以将复杂的逻辑封装在组件中，而不必直接操作state。

3. mutations：mutations是修改state的方法。每次提交mutations时，需要明确指定需要修改的state以及更新的内容。mutations必须是同步操作，无法进行异步处理。如果需要执行异步操作，可以通过actions来实现。

4. actions：actions与mutations的功能相似，但actions可以包含异步操作。通过定义actions，可以将mutations包装在更复杂的逻辑中执行。actions接受context对象作为参数，context中包含state和mutations等功能。

5. modules：modules是vuex的模块化功能，允许将应用程序的逻辑分解为多个模块。每个模块都可以拥有自己的state、getters、mutations和actions，从而实现代码的模块化管理，提高代码的可维护性和可扩展性。

如何通过路由守卫实现拦截用户没有登录？

在vue项目中，通过路由守卫可以实现用户未登录时的拦截。具体实现方式如下：

在路由配置中，定义一个全局路由守卫函数：

```javascript router.beforeEach((to, from, next) => { if (to.path === '/login') { next() // 跳转登录页面 } else if (store.state.user) { next() // 已登录用户可以继续访问 return; } next('/login') // 未登录用户跳转到登录页面 });```

如何实现路由懒加载？

在vue项目中实现路由懒加载的常用方法是使用动态导入的方式。例如，可以通过在路由配置中使用async函数或通过代码分割技术来实现路由懒加载。以下是一个简单的实现示例：

```javascript const Index = () => import('@/components/index.vue')```