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

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

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

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

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

1)v-if、v-show、v-html 的原理

  • v-if: 基于条件判断,根据表达式的真假来添加或移除 DOM 元素,真则渲染,假则移除。
  • v-show: 通过 CSS 的 display 属性来控制元素的显示和隐藏,通过切换 display 的值来实现显示或隐藏,而不是添加或移除元素。
  • v-html: 用于将 HTML 字符串插入到元素中,但要小心防范 XSS 攻击,确保插入的内容是可信任的。

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

  • v-if: 在条件为假时,元素不会渲染到 DOM 中,当条件为真时才会插入 DOM。因此,v-if 对性能有一定优势,但在频繁切换时有一定开销。
  • v-show: 无论条件是真还是假,元素都会渲染到 DOM 中,只是通过 CSS 控制显示或隐藏。适用于频繁切换的场景,但可能在初始渲染时有一些性能开销。

3)v-model 是如何实现的,语法糖实际是什么?

  • v-model 是用于实现表单元素和组件之间的双向数据绑定。

  • 在表单元素上使用 v-model,实际上是一个语法糖,它等价于同时绑定一个 value 属性和一个 input 事件。

  • 对于普通元素, v-model 的实现类似于:

    <input v-bind:value="myValue" v-on:input="myValue = $event.target.value">
    

4)v-model 可以被用在自定义组件上吗?如果可以,如何使用?

v-model 可以被用在自定义组件上。当在自定义组件上使用 v-model 时,实际上是使用了一个 value 属性和一个 input 事件。可以将 value 作为组件的 props 传入,然后在内部触发 input 事件来更新 value 的值。

 codeVue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

然后可以使用该自定义组件并使用 v-model 进行双向绑定:

<custom-input v-model="message"></custom-input>

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

在Vue中,组件中的data选项需要返回一个对象,但为何要将data定义为一个函数呢? 这是因为组件是可以复用的,如果将data直接定义为一个对象,在多个组件实例之间会共享同一个data对象,导致状态共享和数据混乱。而将data定义为函数,每个组件实例可以拥有自己的数据副本,避免了数据的共享。 函数形式的data选项会在组件被实例化时调用,每次返回一个新的data对象,确保每个组件实例都有自己的独立的数据。

6)对keep-alive的理解,它是如何实现的,具体缓存的是什么?

  • keep-alive 是 Vue 提供的一个抽象组件,用于缓存不活动的组件实例,以避免重复渲染。
  • 它通过内部的 includeexclude 属性来决定哪些组件需要被缓存。
  • 具体缓存的是组件的状态、DOM 状态以及它的实例。当组件被 <keep-alive> 包裹时,该组件的 beforeDestroy 钩子将不会被调用,从而保留了组件的状态。
  • keep-alive 的实现基于 Vue 的抽象组件和组件生命周期的特性。

7)$nextTick 原理及作用

  • $nextTick 是 Vue 提供的一个方法,用于在 DOM 更新之后执行回调函数。
  • Vue 在更新 DOM 时是异步的,所以如果你修改了数据后立即想获取更新后的 DOM,可能会得到更新前的状态。$nextTick 则会在下次 DOM 更新循环结束之后执行传入的回调函数。
  • 原理是利用 JavaScript 的事件循环机制,将回调函数推入微任务队列,确保在下一个微任务执行时执行回调。

8)Vue 中给 data 中的对象属性添加一个新的属性时会发生什么?如何解决?

  • 直接给 data 中的对象属性添加新属性时,新属性不会触发视图更新,因为 Vue 无法检测到属性的动态添加。
  • 解决方法是使用 Vue.setthis.$set 方法,它们可以用来在对象上添加新属性并确保触发视图更新。
Vue.set(object, key, value);
// 或
this.$set(object, key, value);

9)Vue中封装的数组方法有哪些,其如何实现页面更新

- Vue 提供了一些封装的数组方法,如 pushpopshiftunshiftsplicesortreverse。这些方法会被重写以触发视图更新。 - Vue 使用 Object.definePropertyProxy 来监听数组的变化,然后派发更新。对数组的这些操作会触发对应的 __ob__(Observer 实例)上的依赖通知,进而引发视图更新。

10)Vue 单页应用与多页应用的区别

Vue单页应用(Single Page Application,SPA)和多页应用(Multi-Page Application,MPA)是两种不同的前端应用架构。

1)Vue单页应用(SPA):

  • 核心概念:SPA是指整个应用程序由一个单一的HTML文件加载,页面的切换通过动态地更新DOM来实现,而不需要重新加载整个页面。
  • 特点:
    • 前端路由:通过使用Vue Router等前端路由库,实现前端路由功能,不需要进行页面刷新或后端路由的请求。
    • 组件化开发:将应用程序划分为多个可复用的组件,提高开发效率和代码可维护性。
    • 异步数据加载:通过Ajax、Fetch或Vue的异步组件等技术,实现异步加载数据,提高页面加载性能。
    • 前后端分离:将前端和后端进行解耦,前端通过API请求数据,后端只负责数据提供,提高开发效率和团队协作性。

2)Vue多页应用(MPA):

  • 核心概念:MPA是指应用程序由多个独立的HTML文件组成,每个页面都是一个独立的应用程序,页面之间的切换需要进行整个页面的刷新。
  • 特点:
    • 分页跳转:页面之间的跳转通过链接的方式进行,每次跳转都需要加载一个新的HTML页面,页面之间的状态不会保留。
    • 渲染模式:每个页面都有自己的独立的渲染过程,页面之间的渲染互不影响。
    • 页面资源加载:每个页面都有自己的独立的资源加载过程,需要加载对应页面所需的脚本、样式等资源。

总结:
SPA适合具有复杂交互和动态内容的应用,能够提供更好的用户体验,但对前端技术要求较高,需要处理好路由、状态管理和SEO等问题。而MPA则适用于传统的网站应用,每个页面都是独立的,适合对SEO友好的场景,但页面切换较慢,用户体验较差。选择SPA还是MPA应根据具体需求和项目特点进行选择。

开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star!

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

  • 19
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,我会尽力回答你的问题。以下是前端Vue面试八股文: 1. Vue的生命周期有哪些?它们分别在什么时候触发? 答:Vue的生命周期分为8个阶段,分别是:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。它们的触发顺序如下: beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed 2. Vue组件之间如何通信? 答:Vue组件之间通信有以下几种方式: (1)props/$emit:父组件通过props向子组件传递数据,子组件通过$emit触发事件向父组件传递数据。 (2)$parent/$children:通过$parent/$children访问父/子组件实例,从而进行数据传递。 (3)$refs:通过$refs访问子组件实例,从而进行数据传递。 (4)event bus:通过事件总线来进行组件之间的通信。 (5)Vuex:使用Vuex来进行全局状态管理。 3. Vue中的路由是什么?如何实现路由跳转? 答:Vue中的路由是指根据不同的URL地址展示不同的内容。Vue中可以使用vue-router来实现路由功能。实现路由跳转可以使用以下两种方式: (1)使用<router-link>标签来实现路由跳转。 (2)使用$router.push()方法来实现路由跳转。 4. Vue中的computed和watch有什么区别? 答:computed和watch都是Vue中用于监听数据变化的方法,它们的区别如下: (1)computed是计算属性,依赖于其他属性的值,并且computed的值会被缓存,只有当依赖的属性发生变化时才会重新计算。而watch是监听属性的变化,当属性发生变化时会执行回调函数。 (2)computed适用于计算复杂的属性,而watch适用于监听某个属性的变化并执行相应的操作。 5. Vue中的v-model指令是什么?如何使用? 答:v-model指令是Vue中用于实现双向数据绑定的指令。它可以将表单元素的值与Vue实例中的数据进行绑定,从而实现数据的自动同步。使用v-model指令可以将表单元素的值与Vue实例中的数据进行绑定,例如: <input v-model="message" />

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员小白条

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值