面试 Vue 框架八股文十问十答第二期

面试 Vue 框架八股文十问十答第二期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）常见的事件修饰符及其作用

• .stop： 阻止事件冒泡。
• .prevent： 阻止默认事件。
• .capture： 事件侦听将以捕获模式触发。
• .self： 只当事件在该元素本身触发时触发回调。
• .once： 事件将只会触发一次。
• .passive： 滚动事件的默认行为会立即触发，而不会等待 preventDefault 处理程序。

2）v-if和v-show的区别

• v-if： 根据表达式的真假条件，决定是否渲染DOM元素。如果条件为假，元素将被销毁，不占用DOM。

<template>
  <div v-if="condition">Content if condition is true</div>
</template>
1
2
3

• v-show： 无论条件是真还是假，元素都会被渲染到DOM中，通过 CSS 的 display 属性控制元素的显示与隐藏。

<template>
  <div v-show="condition">Content always rendered, but may be hidden</div>
</template>
1
2
3

3）v-html 的原理

• v-html 用于将数据以 HTML 的形式插入到页面中，其原理是将绑定的数据解析为 HTML，并插入到相应的 DOM 元素中。
• 注意：使用 v-html 时要确保数据是可信的，以防止 XSS 攻击。

4）v-model 是如何实现的，语法糖实际是什么？

• v-model 是 Vue 提供的一种实现表单元素双向绑定的指令，其实现原理是通过对 input、textarea、select 等表单元素的 input 事件和 value 属性的绑定来实现数据的双向绑定。
• 语法糖实际上是以下两个操作的结合：
  • 对于输入框：<input v-model="message"> 等价于 <input :value="message" @input="message = $event.target.value">。
  • 对于组件：<custom-input v-model="message"></custom-input> 等价于 <custom-input :value="message" @input="message = $event">。

5）data为什么是一个函数而不是对象

• 在 Vue 组件中，data 选项可以是一个对象，也可以是一个返回对象的函数。
• 使用函数的原因是为了防止多个组件实例共享同一个数据对象，避免组件之间的状态污染。
• 当 data 是一个函数时，每个组件实例都会调用该函数，返回一个新的数据对象，确保每个实例都有独立的数据副本。这样就能够保证组件的数据是封闭的，不会相互影响。

6）mixin 和 mixins 区别

• mixin： 是 Vue 中用于复用组件选项的一种方式。它是一个对象，可以包含任何组件选项，如 data、methods、computed 等。使用 mixins 选项将其混入组件中，以实现代码的复用。当多个组件需要共享相同的选项时，可以使用 mixin。

const myMixin = {
  data() {
    return {
      message: 'Hello from mixin!'
    };
  }
};

export default {
  mixins: [myMixin]
};
1
2
3
4
5
6
7
8
9
10
11

• mixins： 是 mixin 的复数形式，是一个选项，用于在组件中混入一个或多个 mixin。可以传入一个 mixin 对象，也可以是一个包含多个 mixin 对象的数组。

import myMixin1 from './myMixin1';
import myMixin2 from './myMixin2';

export default {
  mixins: [myMixin1, myMixin2]
};
1
2
3
4
5
6

7）路由的hash和history模式的区别

• Hash 模式： URL 中的 # 后面的部分被称为 hash，hash 虽然会在每次 URL 变化时触发页面跳转，但不会重新加载页面，可以通过监听 hashchange 事件进行路由变化响应。优点是兼容性好，但 URL 看起来不够干净。
• History 模式： 使用 HTML5 History API，不再依赖 # 来管理路由。通过 pushState 和 replaceState 改变 URL，实现路由跳转，URL 更加美观，但需要服务器支持。可以通过监听 popstate 事件进行路由变化响应。

8）router和route的区别

• router： 一般指的是 Vue Router 实例，它管理着应用中的路由配置、导航等。在 Vue 应用中通过创建 Vue Router 实例来进行路由配置和管理。
• route： 表示当前路由信息对象，包含了当前 URL 解析得到的信息，如路径、参数、query 等。在 Vue 组件内可以通过 this.$route 来访问当前路由对象。

9）如何设置动态路由

在 Vue Router 中可以设置动态路由，通过在路由路径中使用占位符来匹配动态片段，并通过参数传递给组件。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true // 将 URL 中的动态片段作为 props 传递给组件
    }
  ]
});
1
2
3
4
5
6
7
8
9

10）路由守卫

• 全局前置守卫： router.beforeEach 允许你注册一个全局前置守卫，对所有路由跳转前进行拦截处理。

router.beforeEach((to, from, next) => {
  // ...逻辑处理
  next(); // 执行跳转
});
1
2
3
4

• 路由独享守卫： 在路由配置中直接定义 beforeEnter 守卫，仅针对特定路由生效。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      beforeEnter: (to, from, next) => {
        // ...逻辑处理
        next(); // 执行跳转
      }
    }
  ]
});
1
2
3
4
5
6
7
8
9
10
11
12

• 组件内的守卫： 在组件内可以使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 来进行路由变化前的逻辑处理。

export default {
  beforeRouteEnter(to, from, next) {
    // ...逻辑处理
    next(); // 执行跳转
  },
  // 其他组件内守卫
};
1
2
3
4
5
6
7