前端面试之vue篇（一）

前端面试者

于 2024-10-08 21:28:48 发布

阅读量781

点赞数 25

分类专栏：前端面试文章标签：前端

本文链接：https://blog.csdn.net/CSDNWBS/article/details/142762388

版权

前端面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.v-if与v-show的区别

v-if会根据条件值的真假动态的添加或销毁DOM元素，频繁的创建与销毁可能会带来性能问题。v-show通过设置元素display属性来控制元素的显示与隐藏。

2.vuex

Vuex 是 Vue.js 的一个 状态管理模式，用于集中管理应用中的共享状态。它解决了在大型 Vue 应用中多个组件之间共享状态和跨组件通信的问题，提供了一个全局的可预测的状态管理方案。

Vuex 有几个核心的概念，分别是：State、Getters、Mutations、Actions 和 Modules。这些概念与 Vue 组件的数据流相结合，构成了完整的状态管理模式。

State

state是 Vuex 的核心部分，它存储了应用的共享数据。每个组件都可以访问和使用这些数据。

特点：

使用 Vue 的响应式系统，数据的变化会自动影响使用它的所有组件。
在 Vue 组件中可以通过 this.$store.state 来访问 Vuex 的状态。

Getters

Getters 相当于 Vue 组件中的 computed 属性，用于从 state 中派生出一些状态。

特点：

可以缓存计算结果，只有当相关的 state 发生变化时，getters 才会重新计算。
类似于 Vue 组件的计算属性，getters 的返回值会根据其依赖的 state 动态更新。

Mutations

· Mutations 是唯一允许更改 Vuex 中 state 的方法。通过提交 mutation，你可以更改状态。Mutations 必须是同步操作。

特点：

每个 mutation 都有一个字符串类型的 事件类型 和一个回调函数。回调函数的第一个参数是 state，第二个参数可以是传入的载荷（payload）。
通过 this.$store.commit 来提交 mutation。

Actions

Actions 类似于 mutations，不同的是 actions 可以包含异步操作。而 mutations 只能执行同步操作。

特点：

Actions 通过 context 提供的 commit 方法来触发 mutations。
通常用于处理异步请求，如从 API 获取数据等。
通过 this.$store.dispatch 来触发 action

Modules

当应用变得非常复杂时，可以将 Vuex 的 store 分成多个模块，每个模块有自己的 state、mutations、actions 和 getters，从而实现模块化的状态管理。

特点：

每个模块可以拥有自己的 state、getters、mutations 和 actions，并且可以通过 namespaced 来防止命名冲突。
模块间的 state 可以嵌套，通过 this.$store.state.moduleName 访问子模块状态。

vue的导航守卫

导航守卫是用来监听和拦截路由的变化，在路由跳转过程中执行一些逻辑操作。它提供了一系列钩子函数，允许开发者控制页面跳转的行为，比如权限验证、数据预加载等。

Vue 主要有以下几种导航守卫：

1、全局守卫：

适用于整个应用，会在所有路由发生时触发。

`1.1、beforeEach` (全局前置守卫)

触发时机：路由跳转开始前触发。

用途：常用于权限控制或页面跳转前的判断。

参数：

to：目标路由对象。

from：来源路由对象。

next：用于控制导航的函数。可以执行 next() 继续导航，next(false) 取消导航，next('/path') 重定向。

const router = new VueRouter({...});

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    // 如果目标路由需要授权且用户未登录，则跳转到登录页面
    next('/login');
  } else {
    // 否则放行
    next();
  }
});

1.2、`beforeResolve` (全局解析守卫)

触发时机：在组件内守卫和异步路由组件被解析之后，触发此守卫。（路由跳转被确认前触发）
用途：处理一些在路由确认前但在组件解析后的操作。

1.3、`afterEach` (全局后置守卫)

触发时机：路由跳转完成之后触发。
用途：不影响导航，常用于记录日志、页面分析等操作。

2、路由独享守卫

是专门针对某个路由的，在定义路由时可以直接在路由配置中使用。

2.1、beforeEnter

触发时机：进入该路由之前触发。
用途：用于在进入某个特定路由前，进行权限验证或数据预处理等操作。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: AdminPage,
      beforeEnter: (to, from, next) => {
        if (isAdmin()) {
          next(); // 如果是管理员，允许进入
        } else {
          next('/login'); // 否则重定向到登录页
        }
      }
    }
  ]
});

3、组件内的守卫

是在组件中定义的，主要是用来处理与组件相关的逻辑。

3.1、 `beforeRouteEnter`

触发时机：在路由进入之前调用。
特点：与其他守卫不同的是，beforeRouteEnter 中无法访问 this，因为此时组件还没有被创建。
用途：通常用于在组件渲染前获取数据或执行异步操作。

3.2、 `beforeRouteUpdate`

触发时机：当路由改变，且路由对应的组件被复用时调用。例如，当从 /users/1 导航到 /users/2 时，因为是同一个组件，所以不会重新创建，而是复用该组件。
用途：处理动态参数变化时的逻辑，如重新获取数据。

3.3、 `beforeRouteLeave`

触发时机：离开当前路由时触发。
用途：可以在这里防止用户在表单未保存的情况下离开页面。

vue2的生命周期

beforeCreate：
- 发生时机：实例初始化之后，数据观测和事件机制尚未配置完成。
- 用途：无法访问 data、computed、methods 和 watch 等。一般不常用。
created：
- 发生时机：实例已经创建完成，数据观测、属性和方法已完成配置，但尚未挂载到 DOM。
- 用途：可以访问 data、methods，用于初始化数据、调用 API 等逻辑操作，但此时还不能访问 DOM。
beforeMount：
- 发生时机：在模板编译/渲染之前调用。
- 用途：在首次 DOM 渲染前做准备工作。
mounted：
- 发生时机：组件挂载到 DOM 上后调用。
- 用途：此时可以访问 DOM 元素，可以在此执行与 DOM 相关的操作，例如获取元素、操作第三方库（如 jQuery）等。
beforeUpdate：
- 发生时机：响应式数据发生变化，重新渲染虚拟 DOM 之前调用。
- 用途：可在此操作进行状态或数据的更新，但此时 DOM 还未更新。
updated：
- 发生时机：数据更新导致虚拟 DOM 重新渲染并应用到真实 DOM 后调用。
- 用途：DOM 已更新，可以执行依赖于 DOM 结构更新的操作。要小心避免无限更新循环。
beforeDestroy：
- 发生时机：组件实例销毁之前调用。
- 用途：可以在这里执行清理操作，如清除定时器、取消订阅等，确保不会出现内存泄漏。
destroyed：
- 发生时机：组件实例销毁之后调用。
- 用途：此时组件的所有指令解绑，事件监听器移除，子实例也被销毁。可以用来完成最后的清理工作。