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

发布时间:2024年01月04日

面试 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 提供的一种实现表单元素双向绑定的指令,其实现原理是通过对 inputtextareaselect 等表单元素的 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 中用于复用组件选项的一种方式。它是一个对象,可以包含任何组件选项,如 datamethodscomputed 等。使用 mixins 选项将其混入组件中,以实现代码的复用。当多个组件需要共享相同的选项时,可以使用 mixin
const myMixin = {
  data() {
    return {
      message: 'Hello from mixin!'
    };
  }
};

export default {
  mixins: [myMixin]
};
  • mixinsmixin 的复数形式,是一个选项,用于在组件中混入一个或多个 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,不再依赖 # 来管理路由。通过 pushStatereplaceState 改变 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(); // 执行跳转
      }
    }
  ]
});
  • 组件内的守卫: 在组件内可以使用 beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave 来进行路由变化前的逻辑处理。
export default {
  beforeRouteEnter(to, from, next) {
    // ...逻辑处理
    next(); // 执行跳转
  },
  // 其他组件内守卫
};
文章来源:https://blog.csdn.net/qq_67358181/article/details/135388490
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。