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

7）$nextTick 原理及作用

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

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

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

Vue.set(object, key, value);
// 或
this.$set(object, key, value);

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

- Vue 提供了一些封装的数组方法，如 push、pop、shift、unshift、splice、sort、reverse。这些方法会被重写以触发视图更新。 - Vue 使用 Object.defineProperty 或 Proxy 来监听数组的变化，然后派发更新。对数组的这些操作会触发对应的 __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！

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