面试 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>
- v-show： 无论条件是真还是假，元素都会被渲染到DOM中，通过 CSS 的 display 属性控制元素的显示与隐藏。
<template><div v-show="condition">Content always rendered, but may be hidden</div>
</template>
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]
};
mixins： 是mixin的复数形式，是一个选项，用于在组件中混入一个或多个mixin。可以传入一个mixin对象，也可以是一个包含多个mixin对象的数组。
import myMixin1 from './myMixin1';
import myMixin2 from './myMixin2';export default {mixins: [myMixin1, myMixin2]
};
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 传递给组件}]
});
10）路由守卫
- 全局前置守卫：
router.beforeEach允许你注册一个全局前置守卫，对所有路由跳转前进行拦截处理。
router.beforeEach((to, from, next) => {// ...逻辑处理next(); // 执行跳转
});
- 路由独享守卫： 在路由配置中直接定义
beforeEnter守卫，仅针对特定路由生效。
const router = new VueRouter({routes: [{path: '/user/:id',component: User,beforeEnter: (to, from, next) => {// ...逻辑处理next(); // 执行跳转}}]
});
- 组件内的守卫： 在组件内可以使用
beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave来进行路由变化前的逻辑处理。
export default {beforeRouteEnter(to, from, next) {// ...逻辑处理next(); // 执行跳转},// 其他组件内守卫
};
