【前端高频面试题--Vue基础篇】

 作者 ：“码上有前”
 文章简介 ：前端高频面试题
 欢迎小伙伴们 点赞、收藏⭐、留言

Vue基本原理

Vue.js 是一个用于构建用户界面的渐进式框架，其基本原理可以总结为以下几个关键概念：

1. 响应式数据： Vue.js 使用了响应式数据机制，即将数据与视图进行绑定。当数据发生变化时，相关的视图会自动更新。这是通过使用 Object.defineProperty 或 Proxy 对象来劫持数据的访问，以便在访问和修改数据时触发相应的更新。

2. 模板引擎： Vue.js 使用了基于 HTML 的模板语法，允许您将组件的结构和逻辑以声明式的方式编写。模板中可以使用插值、指令和事件绑定等特性来与数据进行交互，使开发者能够更直观地描述用户界面。

3. 组件化： Vue.js 提供了组件化的开发模式，将用户界面划分为独立、可复用的组件。每个组件拥有自己的模板、数据、方法和样式，可以嵌套组合以构建复杂的应用程序。组件化提高了代码的可维护性和复用性，并使开发过程更加模块化和可组合。

4. 虚拟 DOM： Vue.js 使用虚拟 DOM（Virtual DOM）来优化视图更新的性能。当数据发生变化时，Vue.js 会构建一个虚拟 DOM 树，并与上一次的虚拟 DOM 树进行比较，找出需要更新的部分，然后通过最小化的操作来更新实际的 DOM。这种 diff 算法可以减少直接操作真实 DOM 的次数，提高性能。

5. 生命周期钩子： Vue.js 提供了一系列的生命周期钩子函数，允许开发者在组件的不同阶段执行自定义的逻辑。例如，在组件创建前后、数据更新前后、销毁前等时刻，您可以通过生命周期钩子函数来执行相关的操作，例如初始化数据、发送网络请求、清理资源等。

6. 指令和计算属性： Vue.js 提供了丰富的指令和计算属性来增强模板的功能。指令是带有前缀 v- 的特殊属性，用于对元素进行 DOM 操作或响应式绑定。计算属性是根据其他数据动态计算得出的属性，可以对复杂的计算逻辑进行封装和复用。

通过以上的基本原理，Vue.js 实现了一个高效、灵活且易用的前端开发框架，使开发者能够快速构建交互性强、响应式的用户界面。

双向绑定与MVVM模型

双向绑定（Two-Way Data Binding）和 MVVM 模型（Model-View-ViewModel）是与 Vue.js 相关的两个概念。

双向绑定：

双向绑定是指数据的变化能够自动反映到视图，并且用户在视图中的操作也能够自动更新数据。在 Vue.js 中，使用 v-model 指令可以实现双向绑定。v-model 可以用于表单元素（如输入框、选择框等），它会将元素的值与 Vue 实例中的数据进行绑定，当用户修改输入框的值时，数据会自动更新，反之亦然。

例如，下面的代码演示了使用 v-model 实现双向绑定：

<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}p>
  div>
template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
script>

在上述代码中，输入框的值与 message 数据进行了双向绑定。当用户在输入框中输入内容时，message 数据会自动更新，并在下方的

元素中显示出来。反之，如果通过改变 message 数据的值，输入框的内容也会相应地更新。

MVVM 模型：

MVVM 是一种前端架构模式，它将应用程序划分为三个主要部分：Model（模型）、View（视图）和 ViewModel（视图模型）。

• Model： 模型表示应用程序的数据和业务逻辑。它可以是从后端获取的数据、应用程序的状态或其他任何数据源。
• View： 视图是用户界面的可见部分，负责展示数据给用户，并接收用户的输入。
• ViewModel： 视图模型是连接视图和模型的桥梁。它通过暴露数据和命令来供视图使用，并通过监听数据的变化来更新视图。视图模型还可以包含一些额外的逻辑，例如数据的转换、验证和操作等。

在 MVVM 模型中，视图和模型之间通过视图模型进行双向绑定，实现了数据的自动同步。当模型的数据发生变化时，视图会自动更新；当用户在视图中进行操作时，视图模型会更新模型的数据。

Vue.js 的设计理念与 MVVM 模型密切相关，其中视图对应于 Vue 的组件，模型对应于 Vue 实例中的数据，而视图模型则由 Vue.js 框架自动处理。Vue.js 通过使用响应式数据绑定和指令等机制，实现了视图和模型之间的双向绑定，使开发人员能够以声明式的方式构建用户界面，并实现数据的自动同步。

Vue的优点

Vue 具有以下几个优点：

1. 简单易学：Vue 的设计目标之一是易于上手和理解。它采用了直观的模板语法，将组件的结构和行为封装在一起，使开发人员能够以声明式的方式构建用户界面，而无需过多关注底层实现细节。

2. 灵活性：Vue 提供了灵活的组件化开发模式，可以根据需要构建各种规模的应用程序。Vue 的组件可以嵌套并组合在一起，使开发人员能够以模块化的方式构建复杂的界面，并且易于重用和维护。

3. 响应式更新：Vue 实现了响应式数据绑定机制，当数据发生变化时，相关的视图会自动更新。开发人员只需要关注数据的变化，而无需手动操作 DOM 元素，极大地简化了界面的更新和维护。

4. 强大的生态系统：Vue 有一个庞大而活跃的生态系统，包括 Vue Router、Vuex、Vue CLI 等官方提供的库和工具，以及许多第三方库和插件。这些工具和库提供了丰富的功能和解决方案，使开发人员能够更高效地构建复杂应用。

5. 性能优化：Vue 通过使用虚拟 DOM 和高效的更新算法，可以在性能上表现出色。它能够高效地追踪和更新组件的变化，最小化 DOM 操作，提高应用的渲染性能。

6. 社区支持和文档丰富：Vue 拥有一个庞大的开发者社区，有许多活跃的贡献者和用户，提供了丰富的资源和支持。Vue 官方文档详细且易于理解，还有大量的教程、示例代码和社区贡献的插件，帮助开发人员解决问题和学习。

综上所述，Vue 具备易学、灵活、响应式、强大的生态系统、性能优化以及丰富的社区支持等优点，使得它成为一个受欢迎的前端框架之一。

计算属性与监听属性

效果页面如下：

计算属性

• 计算属性的主要优点是它们会缓存计算结果。当依赖的数据发生变化时，计算属性会重新计算，并返回新的结果。但是，如果多次访问计算属性且没有发生依赖变化，它会立即返回之前缓存的结果，避免重复计算，提高性能。
• 通过使用计算属性，我们可以将复杂的计算逻辑封装起来，使代码更加简洁和可维护。
• 它们特别适合用于处理需要基于多个数据进行计算的场景，例如格式化数据、过滤列表等。
  相比于下述案例不适用计算属性写法：

 <p>Full Name: {{'$' + this.price.toFixed(2)}}</p>

而且满足插值{{}}}的单一插值原则与数据的双向绑定，更加美观，便于维护。
在下述示例中，我们有一个组件，其中有两个计算属性：productName 和 formattedPrice。productName 计算属性返回了 name 数据的值，而 formattedPrice 计算属性返回了 price 数据的值，并在前面添加了美元符号和小数点。在模板中，我们可以像访问普通属性一样使用这些计算属性，并将它们的值显示在页面中。

<template>
  <div>
    <p>商品名称: {{ productName }}</p>
    <p>商品价格: {{ formattedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'iPhone',
      price: 999
    };
  },
  computed: {
    productName() {
      return this.name;
    },
    formattedPrice() {
      return '$' + this.price.toFixed(2);
    }
  }
};
</script>

监听属性

在下面案例中，我们有一个计数器 counter 和一个按钮，每次点击按钮时计数器的值会增加。通过监听属性，我们可以在 counter 的值发生变化时执行相应的逻辑。在这个案例中，我们通过监听 counter 属性，在其值发生变化时打印出旧值和新值。并显示出来。

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <button @click="incrementCounter">Increment</button>
    <p>Counter changed from {{this.oldValue}} to {{this.newValue}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
      newValue:0,
      oldValue:0
    };
  },
  watch: {
    counter(newValue, oldValue) {
      this.newValue = newValue;
      this.oldValue = oldValue;
      console.log(`Counter changed from ${oldValue} to ${newValue}`);
    }
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
};
</script>

• 它不支持缓存，数据变化时，它就会触发相应的操作
  支持异步监听
• 监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
• 当一个属性发生变化时，就需要执行相应的操作
  监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数：
  • immediate：组件加载立即触发回调函数
  • deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。
    当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch。

计算属性与监听属性的区别与侧重

计算属性（Computed Properties）和监听属性（Watchers）在 Vue.js 中都用于响应数据的变化，但它们的使用场景和侧重点略有不同。

相似之处：

1. 响应数据变化： 无论是计算属性还是监听属性，它们都可以对数据的变化做出响应，并执行相应的操作。
2. 自动更新： Vue.js 会自动追踪计算属性和监听属性所依赖的数据，并在这些数据变化时自动更新它们。

计算属性的侧重点：

计算属性的主要侧重点是基于其他数据进行计算，并返回计算结果。它们是动态计算的属性，可以像普通属性一样在模板中使用。计算属性具有以下特点：

1. 缓存计算结果： 计算属性会缓存计算结果，只有当依赖的数据发生变化时才会重新计算。这样可以避免重复计算，提高性能。
2. 声明式： 计算属性可以像普通属性一样在模板中进行访问，使模板代码更简洁易读。
3. 适用于复杂计算逻辑： 计算属性适用于处理需要基于多个数据进行计算的场景，例如格式化数据、过滤列表等。

监听属性的侧重点：

监听属性的主要侧重点是监听特定数据的变化，并在数据变化时执行自定义的逻辑。监听属性具有以下特点：

1. 监听数据变化： 监听属性会在指定的数据发生变化时触发相应的监听函数。
2. 执行自定义逻辑： 在监听函数中，您可以执行任何逻辑，例如打印变化信息、发送网络请求、更新其他数据等。
3. 适用于复杂操作和异步任务： 监听属性适用于需要在数据变化时执行较复杂的操作，例如异步任务、数据验证、依赖数据的衍生操作等。

综上所述，计算属性适用于基于其他数据进行计算的场景，而监听属性适用于监听数据变化并执行自定义逻辑的场景。根据具体的需求，您可以选择使用计算属性、监听属性或它们的组合来实现您的功能。

Vue中key的作用

在Vue中，key是用于帮助Vue识别虚拟DOM节点的特殊属性。它的主要作用是在Vue的虚拟DOM diff算法中，帮助Vue准确地追踪和管理虚拟DOM的状态变化，以提高渲染的性能和效率。

以下是key属性的几个主要作用：

1. 唯一标识子节点： 在Vue的列表渲染中，当使用v-for指令渲染一组相同类型的子节点时，每个子节点都需要有一个唯一的key属性。key属性用来标识每个子节点的唯一性，以便Vue能够准确地追踪和管理子节点的状态变化。

2. 优化列表渲染： 通过在列表渲染中指定key属性，Vue可以使用它来优化虚拟DOM的diff算法。使用key属性可以帮助Vue识别出新增、删除和移动的子节点，而无需重新渲染整个列表。这样可以减少不必要的DOM操作，提高渲染性能。

3. 保持组件状态： 当使用或等Vue组件时，key属性也可以用于保持组件的状态。通过为组件指定唯一的key属性，可以确保在组件切换时，旧组件的状态得以保留，而不会被重新创建。

需要注意的是，key属性的值应该是在当前列表中具有唯一性的。通常，可以使用列表中每个元素的唯一标识符或索引作为key属性的值。然而，不推荐使用随机数或索引作为key，因为这可能导致不稳定的渲染结果和性能问题。

总结起来，key属性在Vue中的作用是帮助Vue准确追踪和管理虚拟DOM节点的状态变化，优化列表渲染，以及保持组件的状态。通过合理使用key属性，可以提高Vue应用程序的性能和用户体验。

插槽slot是什么？有什么作用，原理？

在 Vue.js 中，slot（插槽）是一种用于组件之间内容分发的机制。它允许在组件的模板中定义具有特殊含义的插槽，以便将内容插入到组件中的特定位置。

作用：

插槽的主要作用是让开发者能够在组件中灵活地插入内容，以实现组件的可复用性和扩展性。通过使用插槽，我们可以将组件的部分结构和内容交由组件的使用者来定义，使组件能够适应不同的使用场景，同时保持组件自身的封装性和内聚性。

原理：

在 Vue.js 中，组件的模板中可以包含一个或多个具名插槽，通过 元素来定义插槽。当组件被使用时，插槽将被替换为传递给组件的内容。

插槽可以分为具名插槽和默认插槽两种类型。

• 具名插槽： 具名插槽允许我们在组件中定义多个具有不同名称的插槽，每个插槽可以接收不同的内容。在组件的模板中，使用 元素并指定 name 属性来定义具名插槽。在使用组件时，使用