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

发布时间:2024年01月20日

面试 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!

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

文章来源:https://blog.csdn.net/qq_67358181/article/details/135713224
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。