【前端面试题】：Vue篇

Anislandwhale

已于 2024-03-15 22:46:17 修改

阅读量1k

点赞数 26

分类专栏： #前端面试题合集文章标签：前端 vue.js 面试

于 2024-03-15 22:01:38 首次发布

本文链接：https://blog.csdn.net/Anislandwhale/article/details/136751137

版权

#前端面试题合集专栏收录该内容

8 篇文章 2 订阅

订阅专栏

1.Vue 的核心是什么？

Vue 是一套构建用户界面的渐进式自底向上增量开发的 MVVM 框架， vue 的核心只关注视图层，
核心思想：

数据驱动：使数据和视图之间保持高度一致。当数据发生变化时，Vue 能够自动更新视图，无需手动操作 DOM，极大地简化了开发流程。这种机制基于 MVVM 框架实现，通过 ViewModel 作为数据和视图之间的桥梁，实现了数据的双向绑定和自动更新。
组件化：将页面拆分成多个独立的、可复用的组件。每个组件都封装了特定的功能和样式，可以方便地组合和重用，提高了代码的可维护性和可复用性。组件化开发使得页面布局更加灵活和易于管理，同时也降低了代码的耦合度，提高了开发效率。

2.请简述 vue 的单向数据流?

单向数据流,它从父组件流向子组件，通过 props 实现。这种设计确保了数据的权威性和一致性，避免了多个组件同时修改数据导致的问题。子组件不能直接修改通过 props 接收的数据，而是需要通过触发事件将数据发送回父组件，由父组件来更新数据。（可以使用 data 和 computed 解决）

3.Vue 组件之间的通信方式的几种方法？

props / emit
- props：父组件通过props向子组件传递数据。
- $emit：子组件通过$emit触发事件，父组件监听这个事件并接收数据。
attrs / listeners
- $attrs：包含父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=“$attrs” 传入内部组件——在创建高阶组件的时候非常有用。
- $listeners：包含了父作用域中 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=“$listeners” 传入内部组件——在创建高阶组件的时候非常有用。
父链 / 子链(parent / children)

在 Vue.js 中，$parent 和 $children 属性可以用于直接访问组件的父级和子级实例，从而进行组件间的通信。然而，这种方法并不推荐用于常规的组件通信，因为它破坏了组件的封装性，使得组件之间的耦合度过高。但在某些特定场景下，如果你确实需要使用这种方法，下面是一个简单的示例：
provide / inject
- provide 和 inject 绑定在一起，允许祖先组件向其所有子孙组件提供一个依赖。不论组件层次有多深，只要使用了provide和inject就可以提供和接收数据。
Vuex
- Vuex 是 Vue.js 的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Event Bus
- 通过创建一个新的 Vue 实例作为中央事件总线，用于在组件之间传递事件与数据。
slot 插槽
- 通过插槽内容分发，实现父组件向子组件传递 HTML 结构或组件，子组件通过<slot>元素定义插槽的位置。
ref
- 在子组件上添加ref属性，父组件可以通过this.$refs直接访问子组件实例或 DOM 元素。
provide / inject 的替代方案：使用 context
- 在高阶组件或函数式组件中，可以通过context对象（包含attrs、slots、emit等属性）来传递数据和方法。
全局混入

通过 Vue.mixin() 方法可以创建全局混入，影响每一个之后创建的 Vue 实例。可以用来添加全局方法或属性。

Vue 组件之间的通信方式的使用方法： Vue组件通信秘籍：掌握这10大绝招，轻松玩转组件间数据传递

4.简单聊聊 new Vue 以后发生的事情？

Vue 实例初始化： Vue 开始创建一个新的 Vue 实例，将负责管理应用的状态和行为。在这个过程中，Vue 会合并和处理用户传入的选项对象，包括数据（data）、方法（methods）、计算属性（computed）、生命周期钩子（如 created, mounted 等）等
数据响应式处理：：Vue 会对 data 选项中的数据进行处理，将其转化为响应式对象。当这些数据发生变化时，Vue 能够自动感知并触发视图的更新。
模板编译： 如果提供了 template 选项，Vue 会将其编译成渲染函数。渲染函数是一个能够返回虚拟 DOM 的 JavaScript 函数，它根据模板和数据生成虚拟 DOM 树。
创建虚拟 DOM： Vue 根据渲染函数生成一个初始的虚拟 DOM 树。虚拟 DOM 是一个轻量级的 JavaScript 对象，它描述了真实 DOM 的结构。
挂载到真实 DOM： Vue 实例将虚拟 DOM 渲染为真实 DOM，并将其挂载到指定的 HTML 元素上。完成挂载后，Vue 实例可以响应用户的交互，并监听数据变化。
数据变化与更新： 一旦 Vue 实例被挂载，它就开始监听数据的变化。当数据发生变化时，Vue 会重新运行渲染函数，生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较（diff）。然后，Vue 会最小化地更新真实的 DOM，以反映数据的变化。

5.简述 Vue 如何检测数组变化 ?

Vue 可以通过几种方式检测数组变化并响应式地更新视图：

使用 Vue 实例的 vm.$set 方法来更新数组中的元素。这样做可以确保 Vue 能够追踪变化。
直接用索引赋值来替换数组中的元素，但是这种方式不会触发视图更新，除非你使用 Vue.set。
使用原生的 JavaScript 方法，如 push、pop、shift、unshift、splice 和 sort 来修改数组，Vue 会自动检测这些方法的变化。
使用 vm.$forceUpdate() 强制 Vue 实例重新渲染，但这种方式应该谨慎使用，因为它会造成不必要的性能开销。
使用 Vue.set 或 Vue.delete 方法来添加或删除数组中的元素，这样做可以确保响应式系统能够追踪变化。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"],
    };
  },
  methods: {
    addItem() {
      this.items.push("Date"); // Vue 将检测到这个 push 操作并更新视图
    },
  },
};
</script>

6.如何理解 Vue 中的模板编译原理?

Vue 2 的模板编译原理是将模板字符串转换为渲染函数，并通过比较虚拟 DOM 来高效更新视图的过程。这一机制使得 Vue 2 能够灵活地处理模板，并根据数据的变化高效地更新视图。以下是 Vue 2 模板编译原理的详细步骤：

模板解析：
Vue 2 的编译器首先会对模板字符串进行解析。解析器会将模板中的 HTML 标签、属性、文本内容等转换为抽象语法树（AST）。AST 是一个以 JavaScript 对象形式表示的树状结构，它准确地描述了模板的结构和语义。
优化 AST：
在生成 AST 之后，Vue 2 会进行一系列的优化操作。其中一个重要的优化是静态树提升（Static Tree Hoisting）。编译器会遍历 AST，标记出那些不会随数据变化而变化的静态节点。在后续的渲染过程中，这些静态节点会被跳过，从而大大提高了渲染性能。
生成渲染函数：
使用优化后的 AST，Vue 2 会生成一个渲染函数。渲染函数是一个纯 JavaScript 函数，它接收一个包含 Vue 实例数据的上下文对象，并返回一个虚拟 DOM 节点。这个虚拟 DOM 节点是一个轻量级的 JavaScript 对象，它描述了真实 DOM 的结构和属性。
虚拟 DOM 渲染：
当 Vue 实例的数据发生变化时，Vue 2 会重新运行渲染函数，生成新的虚拟 DOM。然后，Vue 会使用一个高效的 diff 算法来比较新旧两个虚拟 DOM 之间的差异。这个算法能够计算出最小的 DOM 操作步骤，使得旧的 DOM 能够转变为新的 DOM。最后，Vue 将这些操作应用到真实的 DOM 上，完成视图的更新。

7.请解释 Vue 为什么要用虚拟 Dom，详细解释原理 ?

Vue 使用虚拟 DOM 的原因主要在于优化性能、提高开发效率和实现跨平台能力。其原理涉及将真实 DOM 树抽象为虚拟 DOM 树，并通过比较新旧虚拟 DOM 树来最小化 DOM 操作，从而避免不必要的性能损耗。

性能优化: 在 Vue 中，每当组件的状态发生变化时，都需要重新渲染视图。如果直接操作真实 DOM，会涉及到大量的 DOM API 调用，导致浏览器进行重排和重绘，性能开销较大。而虚拟 DOM 则是一个轻量级的 JavaScript 对象，它的创建、更新和比较的成本相对较低。Vue 通过比较新旧虚拟 DOM 的差异，计算出最小的 DOM 操作步骤，然后一次性将这些操作应用到真实的 DOM 上，从而避免了大量无谓的计算和 DOM 操作，提高了渲染性能。
提高了开发效率,由于虚拟 DOM 是一个 JavaScript 对象，我们可以使用 JavaScript 的所有功能来操作和查询它，这使得开发过程更加灵活和方便。同时，虚拟 DOM 也使得 Vue 能够支持更复杂的组件嵌套和组合，提高了代码的可维护性和复用性。
够实现跨平台能力: 虚拟 DOM 不仅可以在浏览器环境中运行，还可以在服务器、移动设备等其他环境中运行。这使得 Vue 能够支持多种平台的开发，如 Web、移动应用、桌面应用等，实现了代码的复用和共享。

实现虚拟 DOM 的渲染原理：

将模板编译成虚拟 DOM 树。当 Vue 组件的状态发生变化时，Vue 会重新编译模板，生成新的虚拟 DOM 树。
比较新旧虚拟 DOM 树。Vue 使用一个高效的 diff 算法来比较新旧两个虚拟 DOM 树，找出它们之间的差异。
3. 更新真实 DOM。根据比较结果，Vue 计算出最小的 DOM 操作步骤，并一次性将这些操作应用到真实的 DOM 上，完成视图的更新。

8.说说 Vue 实例挂载过程？

创建 Vue 实例： 通过调用 Vue 构造函数，创建一个 Vue 实例，并传入配置对象。
初始化： 在初始化阶段，Vue 会进行一系列的初始化操作，包括合并配置项、初始化生命周期钩子、初始化事件系统、初始化响应式数据等。
模板编译： 如果配置对象中存在 template 选项，Vue 会将模板编译成渲染函数。渲染函数是 Vue 中用于生成虚拟 DOM 的函数。
创建虚拟 DOM： 通过调用渲染函数，Vue 会根据模板生成虚拟 DOM（Virtual DOM）。虚拟 DOM 是一个轻量级的 JavaScript 对象，它描述了真实 DOM 的结构和属性。
执行挂载函数： Vue 会调用 mount 函数，将虚拟 DOM 渲染成真实 DOM，并将其插入到页面中指定的挂载点上。
数据响应式： 在挂载完成后，Vue 会对数据进行响应式处理。当数据发生变化时，Vue 会自动更新相关的视图。
完成挂载： Vue 实例挂载完成后，会触发 mounted 生命周期钩子函数。在这个阶段，可以进行一些初始化的异步操作，或者与外部库进行交互。

9.vue-router 里的router-link标签和a标签有什么区别?

<a>标签是 HTML 中用于创建链接的标准元素，其 href 属性指向目标 URL，点击后浏览器会导航至新页面，这通常会导致页面的重新加载。

<router-link>是 Vue.js 的 vue-router 插件提供的一个组件，用于在 Vue 应用中实现单页面应用的路由跳转。通过设置 to 属性，可以指定目标路由路径，实现组件间的切换，而不会导致整个页面的重载或刷新。这种方式可以提高应用的性能，因为只有与当前路由相关的组件会被渲染或更新。

10.v-show 与 v-if 的区别？

渲染方式：
- v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。当 v-if 的值为 false 时，对应的元素及其子元素都不会被渲染到 DOM 中。只有当条件变为 true 时，元素才会被重新渲染。
- v-show 就简单得多——不论初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。也就是说，v-show 只是简单地切换元素的 display CSS 属性。
性能考虑：
- 由于 v-if 有更高的切换开销，如果你需要频繁切换一个元素，使用 v-show 会更加高效，因为它只是简单地切换 CSS 属性，而不会涉及元素的销毁和重建。
- 但是，如果元素在初始渲染后很少改变，那么 v-if 和 v-show 的性能差异几乎可以忽略不计。
初始渲染：
- 当 v-if 的条件为 false 时，对应的元素在初始渲染时就不会被渲染到 DOM 中。
- 而 v-show 无论条件如何，都会进行初始渲染，只是通过 CSS 控制其显示或隐藏。
使用场景：
- v-if 更适合在运行时条件很少改变时使用，比如根据用户权限渲染不同的内容。
- v-show 更适合需要频繁切换显示/隐藏状态的元素，比如切换按钮的可见性。。

11.v-if 和 v-for 为什么不建议混合使用？

性能问题：
当 v-if 和 v-for 一起使用时，Vue 会首先计算 v-for，然后为每一个元素渲染 v-if。这意味着，即使 v-if 的条件不满足，Vue 也会先遍历整个列表并计算每一个元素的渲染，这可能导致不必要的性能损耗。如果列表很大，那么这种性能损耗可能会更加明显。
渲染逻辑不明确：
混合使用 v-if 和 v-for 可能会使得渲染逻辑变得复杂和难以理解。通常，我们期望 v-for 仅仅是用来遍历列表并渲染元素，而 v-if 则用于基于条件决定是否渲染某个元素。将两者混合使用可能会使得这种区分变得模糊，增加了代码维护的难度。
优先级问题：
在 Vue 中，v-for 的优先级高于 v-if。这意味着，即使 v-if 的条件不满足，v-for 也会首先被计算。这可能会导致一些预期之外的行为，特别是当 v-if 的条件依赖于 v-for 遍历的元素时。

更好的替代方案：
通常，我们可以使用计算属性（computed properties）或方法来替代混合使用 v-if 和 v-for。例如，我们可以在计算属性中先根据条件过滤列表，然后再在模板中使用 v-for 遍历过滤后的列表。这样，我们就可以避免混合使用 v-if 和 v-for，同时还能保持代码的清晰和高效。

12.Vue 项目时为什么要在列表组件中写 key，其作用是什么?

在 Vue 项目中，当我们使用 v-for 指令来遍历数组并渲染列表组件时，为每一个组件项提供一个唯一的 key 属性是非常重要的。这个 key 属性的主要作用有以下几点：

追踪每个节点的身份：Vue 使用 key 来跟踪每个节点的身份，从而重用和重新排序现有元素。当列表项的顺序改变时，Vue 能够基于 key 的值来识别每个列表项，并相应地移动它们，而不是重新渲染整个列表。这大大提高了列表渲染的性能。
提升渲染性能：由于 Vue 能够基于 key 高效地更新虚拟 DOM，因此它可以更快速地更新视图。如果没有 key，Vue 将使用一种更通用的就地复用策略，这可能导致不必要的组件状态混乱或更新错误。
维护组件状态：在列表渲染中，如果组件具有内部状态（例如，输入框的值或复选框的选中状态），使用 key 可以确保当列表项的顺序改变或添加/删除列表项时，每个组件的状态得到正确的维护。如果没有 key，Vue 可能无法准确地关联组件状态和列表项，导致状态丢失或混乱。
更可靠的更新策略：使用 key 可以使 Vue 的更新策略更加可靠和可预测。Vue 可以根据 key 的变化来确定哪些组件需要被创建、更新或销毁，从而避免了不必要的操作和潜在的错误。

综上所述，为列表组件中的每一项提供唯一的 key 属性是 Vue 开发中的一个重要实践，它有助于提高渲染性能、维护组件状态并确保更可靠的更新策略。

13.vue 中为什么使用 v-for 时不能用 index 作为 key?

状态不稳定： 在 Vue 的开发中，数据是动态变化的，当数据发生变化时，新的元素可能被添加到数组的开头、中间或末尾等位置，这样原本的 index 值就会发生改变，导致 key 与实际内容不匹配，可能会出现渲染错误或性能下降的问题。
列表重新排序时可能引发错误： 当列表中的元素需要重新排序时，如果我们使用 index 作为 key 值，Vue 会认为只是简单的更新了元素的位置，而不是重新创建新元素，这可能会导致列表顺序混乱或出现奇怪的 BUG。
对可访问性的影响： 如果使用 index 作为 key 值，可能会导致不利于屏幕阅读器和键盘导航器的访问，因为这些助力技术可能依赖于 key 值来确定元素的唯一性。

14.vue 在 v-for 时给每项元素绑定事件需要用事件代理吗?为什么?

vue 本身不做事件代理

普通 html 元素和在组件上挂了.native 修饰符的事件。最终 EventTarget.addEventListener()挂载事件;
组件上的，vue 组件实例上的自定义事件（不包括.native）会调用原型上的$on,$emit（包括一些其他 api $off,$once 等等）;

vue 自身没有做事件代理，如果需要，则直接代理到父节点;

15.简述 v-model 双向绑定的原理是什么?

原理：数据劫持 + 发布者-订阅者模式实现。
是的，您总结得非常准确。v-model 在 Vue.js 中实现的原理确实是基于数据劫持（响应式系统）和发布者-订阅者模式。

数据劫持

Vue.js 利用 JavaScript 的 Object.defineProperty（在 Vue 2.x 中）或 Proxy（在 Vue 3.x 中）来实现数据劫持。这意味着当数据发生变化时，Vue 能够自动感知到这些变化，并触发相应的更新操作。在 Vue 的响应式系统中，每个响应式数据都被包装成一个 Observer 对象，该对象会转换数据的 getter 和 setter，使得数据在访问和修改时能够触发依赖更新。

发布者-订阅者模式

Vue 的响应式系统还使用了发布者-订阅者模式（也称为观察者模式）。当数据发生变化时，它就像是一个发布者，通知所有订阅了这个数据的订阅者（Watcher）。这些订阅者通常是与数据相关的视图组件或计算属性。当数据变化时，发布者会触发订阅者的更新函数，从而更新视图或重新计算属性值。

v-model 的工作原理

数据劫持：v-model 绑定的数据被 Vue 的响应式系统处理，变为响应式数据。
创建订阅者：当组件渲染时，如果模板中有使用了 v-model 的表单元素，Vue 会为这些元素创建对应的 Watcher（订阅者），用于监听数据的变化。
视图到数据的绑定：表单元素的事件（如 input 事件）会被 v-model 指令处理，当事件触发时，它会更新对应的数据属性。
数据到视图的绑定：当数据属性通过 JavaScript 代码或其他方式被更新时，Vue 的响应式系统会触发所有订阅了该数据的 Watcher 进行更新，从而更新视图。

16.双向绑定和 vuex 是否冲突？

在 Vue 中，双向绑定和 Vuex 并不直接冲突，但在某些特定情况下可能会引起问题。在 Vuex 的严格模式下，对 state 的修改只能在 mutation 中进行。这意味着双向绑定的 v-model 不能直接用于 state 上，因为当输入框内容改变时，如果试图直接修改 state，就会抛出错误。这是因为 v-model 的双向绑定特性与 Vuex 的单向数据流原则相冲突。
解决方案：

给 Input标签绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用一个方法；
使用带有 setter 的双向绑定计算属性；

17.v-on 可以监听多个方法吗？怎么实现？

在 Vue.js 中，v-on 指令可以用来监听多个方法。这可以通过为同一个元素绑定多个事件处理程序来实现。例如，您可以为一个按钮同时绑定 click 和 dblclick 事件，这样当该按钮被点击或双击时，都会触发相应的方法。

以下是一个简单的示例：

<template>
  <button v-on:click="method1" v-on:dblclick="method2">点击我</button>
</template>

<script>
export default {
  methods: {
    method1() {
      console.log("单击事件触发");
    },
    method2() {
      console.log("双击事件触发");
    },
  },
};
</script>

18.请简述为什么要使用 v-cloak？v-cloak 的作用?

在 Vue 中，v-cloak 是一个用于解决插值表达式闪烁问题的指令。当 Vue 实例渲染完成前，插值表达式会显示为未编译的原始数据内容，这可能导致页面上出现短暂的闪烁。使用 v-cloak 指令可以在 Vue 实例还未完全编译之前隐藏相关元素，直到 Vue 完成编译和渲染后再显示它们，从而防止插值表达式的闪烁问题。

在我们的 Vue 模板中，我们可以将 v-cloak 指令应用于需要隐藏的元素：

<div v-cloak>{{ message }}</div>

为了使 v-cloak 生效，需要在样式表中添加相应的 CSS 规则：

[v-cloak] {
  display: none;
}

在 Vue 实例编译之前，元素会被隐藏起来，避免了初始状态下的插值表达式显示问题。一旦 Vue 实例编译完成，CSS 规则会被应用到元素上，使其显示出来，从而避免了页面加载过程中的插值表达式显示问题。

19.keep-alive 的作用是什么?

在 Vue 中，keep-alive是一个内置组件，它主要用于缓存不活动的组件实例，以避免重复渲染相同的组件，从而提高页面性能和用户体验。

作用：

性能优化：通过缓存组件实例，避免了每次切换组件时都重新创建和销毁组件的开销，减少了 DOM 操作，从而提高了页面渲染性能。
状态保留：缓存的组件实例在切换回来时，其状态会被保留，包括数据、事件监听器以及 DOM 结构等，这使得用户可以无缝地返回到之前的状态，提高了用户体验。

原理：

keep-alive组件会创建一个名为 cache 的缓存对象，用来存储被缓存的组件实例。当一个被keep-alive包裹的组件切换出去时，其实例会被缓存到 cache 中。当再次需要渲染这个组件时，如果之前被缓存的组件实例存在，则会直接从缓存中取出实例，并重新挂载到 DOM 上。

应用场景：

前进后退页面缓存：在一些需要用户频繁前进后退的场景中，如列表页和详情页的切换，使用keep-alive可以缓存页面组件，使得用户在返回时能够迅速恢复之前的状态，避免重新加载数据。
条件渲染缓存：当组件的渲染受到条件控制（如 v-if 或 v-show），并且希望组件在条件改变时保留其状态时，可以使用keep-alive来缓存组件。
路由缓存：在 Vue Router 中，可以通过在路由配置中添加meta属性，并设置keepAlive为true，来实现对路由组件的缓存。这样，当用户在不同路由之间切换时，可以保留特定路由组件的状态。

此外，keep-alive还提供了include和exclude属性，允许开发者指定哪些组件需要被缓存，哪些组件不需要被缓存。这增加了缓存策略的灵活性，使得开发者可以根据实际需求来定制缓存行为。
需要注意的是，虽然keep-alive能够提高性能和用户体验，但过度使用也可能导致内存占用过多。因此，在使用时需要权衡利弊，根据具体的应用场景和需求来决定是否使用以及如何使用。

20.vue 常见指令有哪些？

v-text：用于更新元素的文本内容。它会根据表达式的值来更新元素的文本内容。
v-html：用于更新元素的 innerHTML。与 v-text 不同，它可以解析 HTML 标签。
v-show：根据表达式的真假值来切换元素的 display CSS 属性。
v-if：根据表达式的真假值来条件性地渲染元素。如果为假，则元素及其子元素都不会被渲染到 DOM 中。
v-else：与 v-if 或 v-else-if 一起使用，表示当条件不满足时渲染的元素。
v-else-if：允许为 v-if 或 v-else-if 添加条件。
v-for：用于基于源数据多次渲染一个元素或模板块。可以用于数组或对象。
v-bind：或简写为 :，用于响应式地更新 HTML 属性。例如，绑定一个元素的 class 或 style。
v-on：或简写为 @，用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。
v-model：实现表单输入和应用状态之间的双向绑定。通常用于 <input>、<textarea> 和 <select> 元素。
v-pre：跳过元素和它的子元素的编译。可以用来显示原始的 Mustache 标签。
v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once：元素和组件只渲染一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

21.请描述 Vue 常用的修饰符?

事件修饰符

.stop：阻止事件冒泡
.prevent：提交事件不再重新加载页面，可以用来阻止表单提交的默认行为
.once：点击事件只会触发一次
.native：使用时将被当成原生 HTML 标签看待

按键修饰符

@keyup：键盘抬起
@keydown：键盘按下
按键码：在键盘修饰符后面添加.xxx，用于监听按了哪个键
常用按键码：.enter，.tab，.delete，.esc，.up，.down，.space 等。

表单修饰符

.lazy：在表单输入时不会马上显示在页面，而是等输入完成失去焦点时才会显示；
.trim：过滤表单输入时两边的空格；
.number：限制输入数字或将输入的数据转为数字

鼠标按键修饰符
.left、.right、.middle

22.vue 中 ref 的作用？

在 Vue.js 中，ref 是一个非常有用的属性，其主要作用在于为元素或子组件提供一个唯一标识，使得在 Vue 实例中可以通过 $refs 对象直接访问该元素或组件。以下是 ref 在 Vue 中的主要作用：

获取 DOM 元素：通过在 DOM 元素上添加 ref 属性，我们可以在 Vue 实例的 $refs 对象中直接访问到该元素。这使我们能够方便地获取 DOM 元素的属性、样式或调用其方法。例如，你可以通过 ref 来获取表单输入框的值，或者操作视频播放器的播放、暂停等方法。
获取组件实例：当使用 Vue 的组件化开发时，ref 也可以用来获取组件实例。这意味着你可以直接调用组件实例的方法或访问其属性。例如，你可以通过 ref 来获取一个弹窗组件的实例，并在需要时调用其方法来显示或隐藏弹窗。
组件间通信：ref 还可以作为 Vue 组件之间进行通信的一种方式。通过向子组件传递 ref 属性，父组件可以访问子组件的实例，并直接从父组件中对其进行操作。这使得组件间的数据和方法共享变得更加灵活和方便。

需要注意的是，$refs 只在组件渲染完成后被填充，并且它不是响应式的。因此，它应该避免在模板或计算属性中使用。ref 主要用于直接访问子组件或 DOM 元素，进行某些特定的操作或获取某些信息。在大多数情况下，使用 Vue 的数据驱动方法（如 props 和 events）来处理组件间的通信是更好的选择。

总的来说，ref 在 Vue 中为开发者提供了一种直接操作 DOM 元素和组件实例的方式，使得某些特定的交互和逻辑处理变得更加简单和高效。然而，在使用 ref 时，也需要谨慎考虑其使用场景，避免过度依赖它而导致代码难以理解和维护。

23.在 Vue 中，子组件为何不可以修改父组件传递的 Prop，如果修改了，Vue 是如何监控到属性的修改并给出警告的？

在 Vue 中，子组件不应该直接修改父组件传递的 prop，这是 Vue 的一个核心原则。这个原则确保了组件之间的数据流动是单向的，从而简化了数据流，使得组件之间的关系更加清晰和可预测。

如果子组件直接修改了父组件传递的 prop，可能会导致以下问题：

数据流不清晰：当子组件修改 prop 时，父组件的状态也会发生变化，这可能导致数据流变得难以追踪和理解。
组件复用性降低：如果子组件可以修改 prop，那么每次使用这个子组件时，都需要考虑它可能会如何改变父组件的状态，这降低了组件的复用性。
可能导致错误：如果父组件和多个子组件共享同一个 prop，并且一个子组件修改了它，那么其他子组件接收到的 prop 值也会发生变化，这可能导致不可预期的行为和错误。

Vue 是如何监控到属性的修改并给出警告的呢？

在 initProps 的时候，在 defineReactive 时通过判断是否在开发环境，如果是开发环境，会在触发 set 的时候判断是否此 key 是否处于 updatingChildren 中被修改，如果不是，说明此修改来自子组件，触发 warning 提示。

24.vue 的响应式原理中 Object.defineProperty 有什么缺陷?

无法监听数组的变化：Object.defineProperty 只能针对对象的属性进行劫持，而无法直接监听数组的变化。虽然 Vue 通过包装数组的方法（如 push、pop、shift、unshift、splice、sort、reverse）来模拟数组变化时的响应式更新，但这并不是原生支持，且对于数组的某些方法（如 map、filter 等）或属性（如 length）的修改仍然无法直接监听。
无法检测属性的添加或删除：Object.defineProperty 只能对已经存在的属性进行劫持，对于后来添加或删除的属性，Vue 无法自动将其变为响应式的。如果需要添加新的响应式属性，必须手动使用 Vue.set 方法或 this.$set 方法。
无法监听嵌套对象内部属性的变化：对于嵌套对象，Object.defineProperty 只能对第一层的属性进行劫持。如果嵌套对象内部的属性发生变化，Vue 无法自动检测到。虽然可以通过递归的方式对嵌套对象进行深度监听，但这会增加额外的性能开销。
性能问题：由于 Object.defineProperty 需要对每个属性进行遍历和劫持，因此在处理大型对象或复杂数据结构时，可能会导致性能下降。

25.Vue 的父组件和子组件生命周期钩子执行顺序是什么?

加载渲染过程： 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程： 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程： 父 beforeUpdate -> 父 updated

销毁过程： 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

26.vue 中的 data 为什么是一个函数？

组件复用性：Vue 组件设计初衷就是为了复用。当我们在不同地方多次使用同一个组件时，每个组件实例都应该拥有自己独立的状态，而不是共享同一个状态。将 data 定义为函数可以确保每次复用组件时都会返回一个新的状态对象，从而避免状态污染。
组件独立性：组件的独立性是其封装性的体现。通过将 data 定义为函数，每个组件实例都能创建并维护自己的私有数据空间。这保证了组件内部状态的独立性，使得组件的逻辑更加清晰和可控。
响应式系统：Vue 的响应式系统依赖于组件的 data。将 data 定义为函数，Vue 可以在组件实例化时观察并追踪这些属性的变化，从而实现数据的响应式更新。这确保了当组件状态发生变化时，视图能够自动更新。
避免共享状态：如果 data 是一个对象而不是函数，那么所有组件实例将共享这个对象，导致一个组件实例修改状态后，其他所有实例的状态也会跟着改变。

27.vue 中 hash 和 history 的区别？

URL 格式
hash模式：在 URL 中使用 # 符号来表示路由路径，
history模式：URL 中不再需要 # 符号
兼容性
hash模式：对浏览器的兼容性更好，可以在不支持 HTML5 History API 的浏览器中正常运行。
history模式：需要浏览器支持 HTML5 History API，较低版本的浏览器可能不支持。
SEO（搜索引擎优化）
hash模式：搜索引擎不会解析# 后面的内容，因此在 SEO 方面存在一定的问题。
history模式：URL 更加友好，搜索引擎能够直接解析路由路径，有利于 SEO。
后端配置
hash模式：不需要任何后端配置，因为路由路径是在客户端进行解析的。
history模式：需要后端服务器配置支持，以防止直接访问路由时出现 404 错误。

28.简述 Vue 2.0 响应式数据的原理(重点)?

Vue 2.0 的响应式数据原理主要基于 ES5 的 Object.defineProperty 方法进行数据劫持，同时利用 getter 和 setter 方法进行数据的获取和设置。其核心步骤如下：

你的描述非常准确，涵盖了 Vue 2.0 响应式原理的核心内容。下面我将进一步详细解释这个过程：

Vue 的响应式原理

Vue.js 的响应式原理是其核心特性之一，它允许我们声明式地将数据绑定到 DOM 上，当数据发生变化时，视图也会自动更新。这一切都归功于 Vue 2.0 中的响应式系统。

数据劫持

当我们将一个对象传递给 Vue 实例的 data 选项时，Vue 会遍历该对象的所有属性，并使用 Object.defineProperty 方法将这些属性转化为 getter/setter。这样，Vue 就能够追踪每个属性的变化。

依赖收集

在组件的渲染过程中，当访问到某个数据时，Vue 会通过 getter 方法收集当前组件的 watcher（观察者）。这些 watcher 负责在数据变化时重新渲染组件。

数据变化通知

当数据发生变化时（例如，我们修改了一个属性的值），setter 方法会被触发。setter 会通知所有相关的依赖（即之前收集的 watcher），告诉它们数据已经发生了变化。

异步更新 DOM

Vue 使用异步队列来更新 DOM。当数据发生变化时，Vue 不会立即更新 DOM，而是将更新操作放入一个队列中。在下一个事件循环的“tick”中，Vue 会执行队列中的所有更新操作。这种机制有助于减少不必要的计算和 DOM 操作，提高性能。

虚拟 DOM 对比与更新

当组件需要重新渲染时，Vue 会生成一个新的虚拟 DOM 树。然后，Vue 会对比新旧虚拟 DOM 树之间的差异，并记录下这些差异。最后，Vue 会将这些差异应用到真实的 DOM 树上，从而实现视图的更新。这个过程是高效的，因为 Vue 只更新那些真正发生变化的节点，而不是整个 DOM 树。

总的来说，Vue 的响应式原理核心是通过 ES5 的Object.defindeProperty进行数据劫持然后利用get和set方法进行数据的获取和设置。这时的 data 中声明的属性都将被添加到get和set中，当读取 data 中的数据中自动调用get方法。当修改数据时或者数据发生改变时，自动调用set方法去侦听检测数据的变化，同时会通知观察者 Wacher。观察者 Wacher 自动重新触发 render 当前组件（子组件不会重新渲染）生成新的虚拟 DOM 树，Vue 的框架会遍历并对比新旧虚拟 DOM 树上面的每个节点的差别并记录下来，最后加载操作将所有记录下来的节点，局部修改到真实的 DOM 树上。

29.聊聊 Vue 的双向数据绑定，Model 如何改变 View, view 又是如何改变的？

Vue 的双向数据绑定是其核心特性之一，它使得数据模型（Model）和视图（View）之间能够实时地、自动地保持同步。这种机制让开发者能够更专注于业务逻辑，而不是手动处理 DOM 的更新。下面，我们来详细探讨 Vue 的双向数据绑定以及 Model 如何改变 View，以及 View 如何影响 Model。

Vue 的双向数据绑定原理

Vue 的双向数据绑定主要依赖于其响应式系统和观察者模式。当 Vue 实例创建时，它会遍历 data 对象中的所有属性，并使用 Object.defineProperty 将这些属性转化为 getter/setter。这样，当数据发生变化时，setter 会被触发，进而通知依赖于此数据的视图进行更新。

Model 如何改变 View

数据劫持：Vue 通过 Object.defineProperty 对 data 中的属性进行劫持，为每个属性添加 getter 和 setter。当数据被访问时，getter 会被调用；当数据被修改时，setter 会被调用。
依赖收集：在组件的渲染过程中，Vue 会追踪哪些数据属性被用到了。当这些数据属性的 getter 被调用时，Vue 会收集当前组件的 watcher（观察者），这些 watcher 负责在数据变化时重新渲染组件。
数据变化通知：当数据属性的 setter 被调用时（即数据发生变化时），Vue 会通知所有相关的依赖（即之前收集的 watcher）。这些 watcher 会重新执行，从而触发组件的重新渲染。
组件重新渲染：组件接收到重新渲染的信号后，会生成新的虚拟 DOM 树。然后，Vue 会对比新旧虚拟 DOM 树之间的差异，并只更新那些真正发生变化的节点，从而高效地更新视图。

View 如何影响 Model

在 Vue 中，View 通常不会直接修改 Model。相反，View 通过触发事件（如点击事件、输入事件等）来通知 Vue 实例。Vue 实例会监听这些事件，并在事件处理函数中修改数据模型。这样，当用户在视图中进行交互时（例如，在输入框中输入文本），Vue 能够捕获这些交互并相应地更新数据模型。

总结

Vue 的双向数据绑定机制使得数据模型和视图之间能够保持实时同步。通过数据劫持和依赖收集，Vue 能够自动追踪数据的变化并通知视图进行更新。同时，通过事件监听和事件处理函数，视图也能够影响数据模型。这种机制大大简化了前端开发中的数据管理和视图更新过程，提高了开发效率和代码的可维护性。

30.简述 vue-router 动态路由是什么? quety 和 params 传参方式的区别？

Vue-router 的动态路由

Vue-router 的动态路由是指`，根据参数或条件的不同，动态生成路由的方式。这种方式允许开发者在路由配置中定义动态路径参数，使得路由能够匹配包含不同参数的 URL。当这些带参数的 URL 被访问时，相应的组件会根据传递的参数来渲染不同的内容。

quety 和 params 传参方式的区别

vue-router 中的 query 和 params 是两种常用的传参方式，它们之间存在一些关键的区别：

请求方式：
- query 相当于 GET 请求。在页面跳转时，请求参数会出现在地址栏中，因此可以直接在 URL 中看到传递的参数。
- params 相当于 POST 请求。传递的参数不会在地址栏中显示，从而实现了参数的隐藏传递。
刷新页面时的表现：
- 使用 query 传参时，刷新页面不会丢失 query 中的参数。这是因为 query 的参数是附加在 URL 上的，所以即使刷新页面，这些参数仍然会保留在 URL 中。
- 使用 params 传参时，刷新页面可能会导致 params 中的参数丢失。这是因为 params 的参数不是通过 URL 传递的，而是通过路由配置来传递的。因此，如果路由配置没有正确设置，或者在某些特定情况下（如用户直接访问某个路由），参数可能会丢失。
路由配置：
- query 方式传参可以使用 path 或 name 来引入路由。
- params 方式传参必须使用 name 来引入路由，不能使用 path。如果错误地使用了 path，那么在接收参数的页面上，参数将会是 undefined。
适用场景：
- 当需要传递较多数据，或者希望用户能够直接通过 URL 访问并看到传递的参数时，适合使用 query。
- 当需要传递的参数较为敏感或不希望在 URL 中显示时，适合使用 params。。

31.简述如何使用 Vue-router 实现懒加载的方式?

Vue Router 的懒加载

Vue Router 的懒加载，也被称为按需加载，是一种优化手段，用于延迟加载或异步加载路由对应的组件。在单页面应用（SPA）中，通常会有多个组件或页面，如果一次性加载所有组件，会导致应用启动缓慢，并可能消耗大量内存。通过懒加载，我们可以只加载当前访问的路由对应的组件，其他组件则在需要时再进行加载，从而提高应用的启动速度和性能。

实现 Vue Router 懒加载的三种方式

Vue 异步组件

Vue 提供了异步组件的功能，允许我们将组件定义为一个返回 Promise 的函数。在路由配置中，我们可以将组件设置为异步组件，从而实现懒加载。

const Home = () => import("./views/Home.vue");
const About = () => import("./views/About.vue");

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

在上面的例子中，Home 和 About 组件都是通过异步导入的方式定义的，当路由被访问时，对应的组件才会被加载。

ES6 标准语法 import()

使用 ES6 的 import() 语法可以实现动态导入，这是推荐的方式，因为它与 Webpack 的代码分割特性配合得很好。在路由配置中，我们直接使用 import() 函数来导入组件。

const routes = [
  { path: "/", component: () => import("./views/Home.vue") },
  { path: "/about", component: () => import("./views/About.vue") },
];

这种方式与 Vue 异步组件类似，但 import() 是 JavaScript 的原生语法，更加直观和灵活。

Webpack 的 require.ensure()

require.ensure() 是 Webpack 1 和 2 中用于实现代码分割和懒加载的方法。但在 Webpack 3 及更高版本中，推荐使用动态 import() 语法。不过，为了完整性，这里还是简单介绍一下。

const routes = [
  {
    path: "/",
    component: (r) =>
      require.ensure([], () => r(require("./views/Home.vue")), "home"),
  },
  {
    path: "/about",
    component: (r) =>
      require.ensure([], () => r(require("./views/About.vue")), "about"),
  },
];

32.简述 vue-router 路由钩子函数是什么?执行顺序是什么?

vue-router 路由钩子函数

全局钩子：主要包括 beforeEach 和 afterEach，它们分别在路由跳转前和跳转后进行触发。
路由独享的钩子：在路由配置中直接定义 beforeEnter 钩子函数，这个函数只在进入路由之前有效。
组件内的钩子：主要包括 beforeRouteEnter、beforeRouteUpdate (2.2 新增) 和 beforeRouteLeave，这些钩子在组件内部定义，分别对应进入路由前、路由复用（同一个路由，但是参数改变了，例如/user/:id）和离开路由前。

执行顺序：

导航被触发。
在全局的 beforeEach 钩子按照创建顺序调用。
在路由配置中可能定义的 beforeEnter 钩子。
在组件内 beforeRouteEnter 调用。
解析异步路由组件。
在被激活的组件里调用 beforeRouteUpdate 钩子。
调用全局的 beforeResolve 钩子。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数。

33.vue 的`$router`和`$route` 区别是什么？

总结来说，$route和$router在 Vue 中都是与路由相关的核心对象，但它们的功能和使用方式有所不同。

$route对象主要表示当前的路由状态，它包含了当前路由的详细信息，如路径、参数、查询参数等。通过this.$route，我们可以在 Vue 组件中访问这些路由信息，以便进行条件渲染、数据获取等操作。

$router对象则是 Vue Router 的实例，它包含了全局的路由配置信息和功能。$router对象提供了编程式导航的方法，如push和replace，用于在应用程序中进行路由跳转。此外，它还可以用来监听路由变化、添加新的路由规则等。通过this.$router，我们可以在 Vue 组件中访问并使用这些路由功能。

简而言之，$route关注于当前路由的状态和信息，而$router则关注于全局路由的配置和导航功能。在 Vue 应用程序中，我们可以根据具体需求选择使用这两个对象来实现路由控制和导航功能。

34.简述 vue.mixin 的使用场景和原理以及优缺点?

mixin 是什么：
Mixin 是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问 mixin 类的方法而不必成为其子类。Mixin 类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂

使用场景：

全局设置一些默认属性或方法：例如全局的 axios 请求拦截器、响应拦截器等。
全局添加一些通用的方法或属性：如日期格式化、金额格式化等。
全局为所有组件添加一些公共的钩子函数：如 beforeCreate 钩子函数进行一些初始化操作。

原理：

Vue.mixin 的原理基于 Vue 的选项合并机制。当一个组件使用 mixin 时，Vue 会将 mixin 中的选项与组件的选项进行合并。合并的过程包括数据、方法、生命周期钩子等。如果发生选项冲突，通常会以组件的选项为准，但有一些选项（例如生命周期钩子）会被合并执行。合并时的规则如下：

数据选项会被浅合并，即如果组件和 mixin 都有相同的数据字段名，组件的数据将覆盖 mixin 的数据。
方法选项会被合并，如果组件和 mixin 都有相同的方法名，它们都会被保留，并按照调用的顺序执行。
生命周期函数钩子会依次执行，mixin 的钩子将在组件的钩子之前调用。
其他选项，例如 directives、components 等，也会按照相似的规则进行合并。

Vue.mixin 优缺点

优点：

提高代码复用性：Vue.mixin 允许开发者将常用的代码逻辑抽离出来，通过混入到多个组件中实现代码复用，避免了代码冗余，提高了开发效率。
维护方便：当需要修改某些共用的功能或数据时，只需要在 mixin 中修改，而无需在每个使用它的组件中单独修改，这使得代码维护变得更为方便。
灵活性高：Vue.mixin 支持局部混入和全局混入，可以根据项目的实际需求灵活选择使用方式。

缺点：

命名冲突：如果混入的不同 mixin 具有相同的属性或方法名，可能会导致命名冲突。为了避免不必要的问题，开发者需要谨慎处理命名，确保一致性。
不透明性：当多个 mixin 混合在一起时，可能导致代码逻辑变得复杂，难以理解和追踪。这增加了代码的阅读和维护难度。
隐式依赖：使用 mixin 会引入隐式依赖，使得组件的行为受到混入的影响。这增加了代码的复杂性和不确定性，可能导致调试和排查问题变得困难。
耦合性增加：过度使用 mixin 可能会增加组件之间的耦合性，使得组件变得不够独立和可重用。这违背了组件化的初衷，可能导致代码结构变得混乱。

35.简述对于 Vue 的 diff 算法理解?

Vue 的 diff 算法是一种用于优化 DOM 更新过程的高效策略。它的主要目的是最小化 DOM 操作次数，提高性能。以下是关于 Vue 的 diff 算法的一些关键理解：

同层比较：Vue 的 diff 算法主要在同一层级进行比较，不会跨层级比较。这是为了简化操作策略，因为跨层级的比较会增加算法的复杂性，并且实际上跨层级的 DOM 操作非常少，忽略这部分操作不会带来太大的影响。
节点比较：在同一层级中，Vue 会从两端向中间进行节点比较。首先比较两端的节点，如果节点相同，就移动指针；如果节点不同，就比较另外两端的节点。这样的操作可以最小化 DOM 操作次数，提高性能。当使用 v-for 指令渲染列表时，Vue 会基于唯一的 key 属性进行高效的复用和排序。
创建和删除节点：如果旧的节点已经遍历完，但是新的节点还有剩余，那么剩余的节点会被创建并添加到 DOM 中；反之，如果新的节点已经遍历完，但是旧的节点还有剩余，那么剩余的节点会被删除。
与 Virtual DOM 的关系：diff 算法会将新的虚拟 DOM 和旧的虚拟 DOM 进行对比，找出差异，并将差异封装为补丁。这些补丁通过方法的循环遍历应用到真实 DOM 上，以差异化最小的代价去操作 DOM。Virtual DOM 是 Real DOM 的 JS 对象表示，它将真实 DOM 的标签名、标签属性、子标签以及文本节点都以 JS 对象的样式呈现。当真实 DOM 发生更改时，会生成一个新的虚拟 DOM，然后 diff 算法会比较新旧虚拟 DOM，找出差异并最小化更新视图。

总的来说，Vue 的 diff 算法通过同层比较、节点比较、创建和删除节点以及与 Virtual DOM 的对比，实现了高效的 DOM 更新过程，提高了应用程序的性能。

36.请简述 Vuex 的原理、核心及使用 ?

原理：

Vuex 的实现原理主要基于响应式数据和发布订阅模式。在 Vuex 中，所有的状态都被存储在一个单一的状态树中，这个状态树是响应式的。当状态发生变化时，所有依赖这个状态的组件都会自动更新。这种自动更新是通过 Vue 的响应式系统实现的，当状态改变时，Vue 会自动追踪依赖这些状态的组件，并触发它们的重新渲染。

核心：

Vuex 的核心主要包括五个部分：

state：用于存放状态或数据，是一个仓库，任何组件都可以调用里面的数据。
getters：相当于组件中的计算属性，当 state 中的数据发生改变时，getters 中的数据也会跟着改变。
mutations：用于更改 state 中的数据。它是一个同步的操作，接收当前的状态和一个 payload 参数，然后对状态进行修改。
actions：类似于 mutations，但可以进行异步操作。在 actions 中定义异步操作，并通过 commit 方法提交 mutation 以更改状态。
modules：当应用变得非常复杂时，可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，甚至嵌套子模块。

使用步骤：：

安装 Vuex：
首先，你需要在项目中安装 Vuex。这可以通过 npm 或 yarn 等包管理工具完成。例如，你可以使用命令npm install vuex --save来安装 Vuex。
引入 Vuex：
在你的 Vue 项目中，你需要引入 Vuex，并在 Vue 实例中创建 store。
创建 Vuex 实例：
创建一个 Vuex 实例，通常包含以下部分：
- state：用于存储应用的状态数据。
- mutations：用于修改 state 中的数据。它们是同步函数，通过commit方法调用。
- actions：类似于 mutations，但可以进行异步操作。它们通过dispatch方法调用，并在内部调用commit以更改状态。
- getters：基于 state 的计算属性，用于从 state 中派生出一些状态。
在 Vue 组件中使用 Vuex：
- 在 Vue 组件中，你可以通过this.$store来访问 Vuex 实例，进而访问 state、getters，提交 mutations 或分发 actions。
- 使用this.$store.state来访问状态数据。
- 使用this.$store.commit('mutationName', payload)来提交 mutation 以修改状态。
- 使用this.$store.dispatch('actionName', payload)来分发 action 以进行异步操作。
- 使用this.$store.getters.getterName来访问通过 getters 定义的计算属性。
在模板中使用 Vuex 状态：
你还可以在 Vue 组件的模板中直接使用 Vuex 状态。例如，你可以使用计算属性或方法从this.$store中获取状态数据，并在模板中显示。

请注意，Vuex 的设计初衷是为了管理全局状态，因此不应过度使用。只在确实需要跨多个组件共享状态或管理状态时，才考虑使用 Vuex。

37.说一说 computed 和 watch 的区别？

功能特性：

computed：主要用于声明计算属性。它基于依赖的数据进行计算，并返回计算后的结果。只有当依赖的数据发生变化时，computed属性才会重新计算。这种特性使得computed非常适合处理复杂计算或高频数据变化，同时避免了不必要的重复计算，提高了性能。
watch：主要用于监听数据的变化，并在数据变化时执行特定的回调函数。与computed不同，watch不会缓存计算结果，每次数据变化都会触发回调函数。这使得watch更适合处理数据变化后的副作用操作，如异步请求、DOM 更新等。

使用场景：

computed：适用于需要根据其他响应式数据计算得出新值的场景。例如，在购物车应用中，计算商品的总价就是一个典型的computed属性的使用场景。此外，computed还可以用于优化性能，避免重复计算。
watch：适用于需要监听某个数据的变化，并在数据变化时执行一些副作用操作的场景。例如，当监听搜索查询输入时，你可能需要在数据变化后调用 API 进行搜索。此外，watch还可以用于处理异步操作或执行复杂的逻辑。

性能优化：

computed：具有缓存机制，只有当依赖的数据发生变化时才会重新计算。这避免了不必要的重复计算，提高了性能。
watch：每次数据变化都会触发回调函数，如果回调函数中的操作复杂或耗时，可能会对性能产生负面影响。因此，在使用watch时需要注意避免性能瓶颈。

38.Vuex 页面刷新数据丢失的原因及解决方法?

原因：
Vuex 中的数据是保存在运行内存中的，也就是说它们存储在浏览器的堆栈内存中。当页面刷新时，之前存储数据的堆栈内存会被释放，导致 Vuex 里的数据被重新初始化，因此会出现数据丢失的情况。这是因为页面刷新相当于重新加载了整个应用，所有保存在内存中的状态都会被重置。

1. 使用浏览器的本地存储：

通过监听 Vuex 中数据的变化，在数据变化时将数据自动存储到浏览器的 localStorage 或 sessionStorage 中。当页面刷新时，从本地存储中读取数据并恢复到 Vuex 中。这种方法可以确保在页面刷新后，数据仍然可用。

示例代码：

在 Vuex 的 mutation 函数中：

mutations: {
  someMutation(state, payload) {
    // 修改状态
    state.someData = payload;

    // 存储到本地
    localStorage.setItem('vuexData', JSON.stringify(state));
  }
}

在页面加载时：

mounted() {
  // 从本地存储读取数据
  const savedData = localStorage.getItem('vuexData');
  if (savedData) {
    // 恢复数据到 Vuex
    this.$store.replaceState(JSON.parse(savedData));
  }
}

2. 使用 Vuex 插件：

利用 Vuex 插件，如 vuex-persistedstate，它会自动处理数据的持久化。插件会在状态改变时将其保存到 localStorage 或其他存储中，并在页面加载时恢复状态。

安装和配置：

npm install vuex-persistedstate --save

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      storage: window.localStorage, // 或使用 sessionStorage
    }),
  ],
});

39.Vue 的普通 Slot 以及作用域 Slot 的区别？

Vue 中的普通 Slot（默认插槽）和作用域 Slot（具名插槽或带数据的插槽）的主要区别体现在它们的用法和功能上。

普通 Slot（默认插槽）：
- 默认插槽是 Vue 组件中未命名（即不带 name 属性）的插槽。
- 在组件的模板中，通过 <slot></slot> 标签来定义默认插槽的位置。
- 在父组件中，直接在子组件标签内写的内容会作为默认插槽的内容，插入到子组件模板的 <slot></slot> 位置。
- 默认插槽的内容由父组件决定，可以在父组件中直接写入需要展示的内容。
作用域 Slot（具名插槽或带数据的插槽）：
- 作用域插槽是一种可以带数据的插槽，可以获取子组件传递的数据。
- 在子组件的模板中，通过 <slot :name="xxx" :data="yyy"></slot> 来定义作用域插槽，其中 :name 是插槽的名字，:data 是传递给父组件的数据。
- 在父组件中，使用 <template slot-scope="props"> 来接收子组件传递的数据，并在其中定义如何展示这些数据。这里的 props 是一个临时变量，用于接收子组件传递的所有数据。
- 作用域插槽的内容仍然由父组件决定，但父组件可以基于子组件传递的数据来动态地展示内容。

区别总结：

普通插槽的内容完全由父组件决定，子组件只提供一个插槽的位置。
作用域插槽则允许子组件向父组件传递数据，父组件可以根据这些数据来动态地展示内容。
普通插槽更适用于静态内容的展示，而作用域插槽更适用于需要根据子组件状态或数据动态展示内容的场景。

40.简述 Vue.set 方法原理?

Vue.set 方法是 Vue.js 框架中提供的一个用于向响应式对象中添加一个属性的方法。这个方法主要用于解决 Vue 无法检测到对象属性的添加或删除的问题。

Vue.js 使用的是基于 ES5 的 getter 和 setter 来实现数据的响应式。当我们将一个普通的 JavaScript 对象传入 Vue 实例的 data 选项时，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 将它们转化为 getter/setter，使数据变得“响应式”。

然而，由于 JavaScript 的限制，Vue 不能检测到以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

对于对象，由于 Vue 无法在初始化实例时对对象属性的添加或删除进行追踪，因此如果你向已经创建的实例添加新的根级响应式属性，它不会触发视图更新。

这就是 Vue.set 方法存在的原因。Vue.set 的基本语法是：

Vue.set(target, propertyName / index, value);

target：要更改的数据对象
propertyName/index：要更改的属性名或索引
value：新的属性值

Vue.set 的原理是：它会通过调用 Object.defineProperty 方法来确保新添加的属性也是响应式的，从而触发视图的更新。具体来说，Vue.set 方法首先会检查目标对象是否是 Vue 实例或响应式对象，如果不是，则会警告用户。然后，它会检查属性名或索引是否是字符串或数字，如果不是，也会进行警告。最后，它会使用 Object.defineProperty 方法在目标对象上定义新的属性，并触发视图的更新。

41.简述 $nextTick 的作用是什么?他的实现原理是什么?

nextTick 实现原理：
主要依赖于 JavaScript 的事件循环和任务队列机制。当调用 nextTick 时，Vue 会检查当前的环境是否支持 Promise、MutationObserver、setImmediate 或 setTimeout 等异步方法。如果支持，Vue 就会创建一个对应的异步任务，并将回调函数放入任务队列中。由于 JavaScript 的事件循环机制，这个任务队列中的回调函数会在当前的同步代码执行完毕后，以及 DOM 更新完成后执行。

作用：

等待 DOM 更新后执行操作：有时候你需要在 Vue 更新 DOM 后执行一些操作，例如操作更新后的 DOM 元素。使用 $nextTick 可以确保你的操作在 DOM 更新完成后执行。
避免不同数据更新之间的竞态条件：如果你在数据更新后立即想要获取更新后的 DOM 信息或进行操作，直接在数据更新后使用 $nextTick 会更可靠，避免竞态条件。

42.简述 MVVM 和 MVC 的原理以及区别？

原理：

MVVM 的原理是将 View 和 Model 的通信转化为 View 和 ViewModel 的通信，ViewModel 主要负责处理 View 中的用户输入和展示逻辑，并将更新后的数据通知给 View，从而实现了数据和展示逻辑分离。
MVC 的原理是将应用程序分为 Model、View 和 Controller 三部分，Model 提供数据操作、View 负责展示、Controller 作为中间人调度 Model 和 View 的交互。
主要区别：
数据绑定：MVVM 模式中，数据绑定是通过数据绑定器（Data Binding）来实现的，View 和 ViewModel 之间没有直接的关联；而 MVC 模式中则需要 Controller 通过 View 和 Model 来传递数据。
视图状态：MVVM 模式中，View 的状态被 ViewModel 监控和管理，View 只负责呈现状态，不会直接修改状态；而 MVC 模式中则需要 View 和 Controller 共同管理视图状态。
可测试性：MVVM 模式中，ViewModel 可以通过数据绑定器和模拟数据来方便地进行单元测试；而 MVC 模式中，Controller 和 View 都需要准备模拟数据才能进行单元测试。

43.请叙述 Vue 中使用了哪些设计模式?

Vue.js 框架在构建和组织代码时采用了多种设计模式，这些设计模式帮助 Vue 实现了高效、灵活和可维护的代码结构。以下是一些 Vue 中常用的设计模式：

MVVM（Model-View-ViewModel）模式：
- MVVM 是 Vue 的核心设计模式，它将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。
- 模型表示数据和业务逻辑，视图负责展示用户界面，而视图模型是连接视图和模型的桥梁，它监听模型的变化并自动更新视图。
观察者模式（Observer Pattern）：
- Vue 的响应式系统基于观察者模式实现，当数据发生变化时，所有依赖该数据的视图或计算属性都会得到通知并更新。
- 每个 Vue 实例都是一个观察者，它观察其数据的变化，并在数据变化时触发更新。
发布-订阅模式（Publish-Subscribe Pattern）：
- Vue 的事件系统采用了发布-订阅模式，允许组件之间通过事件进行通信。
- 一个组件可以发布事件，其他组件可以订阅这些事件并在事件发生时执行相应的逻辑。
工厂模式（Factory Pattern）：
- Vue 使用工厂模式来创建组件实例。通过传入不同的参数和配置，可以创建出具有不同行为和外观的组件。
- 这使得组件的创建变得更加简单和灵活。
装饰器模式（Decorator Pattern）：
- Vue 中的 computed 属性和 watch 属性通过装饰器模式实现。它们可以对原始数据进行修饰和增强，例如计算属性可以根据依赖的数据动态计算返回值。
策略模式（Strategy Pattern）：
- Vue 中的指令和过滤器使用了策略模式。指令和过滤器可以根据不同的需求使用不同的策略来处理数据和视图。
组件化模式：
- Vue 强调组件化开发，将页面拆分成多个独立的组件，每个组件具有特定的功能和状态。
- 这种模式提高了代码的复用性和可维护性。
单向数据流：
- Vue 遵循单向数据流的设计原则，数据从父组件流向子组件，子组件不能直接修改父组件传递的数据。
- 这种模式有助于保持数据的一致性和可预测性。

44.简述为什么 Vue 采用异步渲染及异步渲染的原理?

Vue 采用异步渲染的主要原因是为了提高性能和效率。具体来说，异步渲染在 Vue 中发挥了以下几个关键作用：

避免不必要的计算和 DOM 操作：当 Vue 组件的状态发生变化时，它并不会立即更新 DOM，而是将组件标记为“待更新”。然后，在事件循环的下一个 tick 中，Vue 会遍历并执行所有待更新的组件，最后一次性更新 DOM。这种方式减少了不必要的计算和 DOM 操作，尤其是在一个组件状态在短时间内多次变化的情况下，Vue 只会执行一次 DOM 更新。
利用事件循环机制处理渲染任务：Vue 的异步渲染原理将渲染任务分解为多个小任务，并使用事件循环机制来处理这些任务。这种机制可以确保任务按照正确的顺序被执行，避免了阻塞主线程，从而保持页面的流畅性。
优化渲染过程：Vue 使用虚拟 DOM 来表示真实的 DOM 结构，通过比较新旧虚拟 DOM 的差异，只对需要更新的部分进行具体的 DOM 操作，进一步减少了不必要的操作和性能消耗。
支持异步组件和按需加载：Vue 还使用异步组件的方式来实现按需加载，只有当组件被需要时才会进行渲染。这种方式可以进一步提高性能和响应速度。

45.请简述 Vue 更新数组时触发视图更新的方法?

Vue 更新数组时触发视图更新的方法包括以下几种：

使用 Vue 提供的变异方法：Vue 包含一组观察数组的变异方法，如 push()、pop()、shift()、unshift()、splice()、sort()和 reverse()。这些方法可以直接修改原始数组，并会触发视图更新。
使用新数组替换旧数组：Vue 在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化复用 DOM 元素。因此，可以用新数组来替换旧数组，这样也能够触发视图更新。可以使用 filter()、concat()和 slice()等方法返回一个新数组来进行替换。
使用 Vue.set()方法：Vue.set()方法可以用来向响应式对象中添加一个属性并确保这个新属性同样是响应式的，同时触发视图更新。这个方法接受三个参数：目标对象、要添加的属性名和属性值。在数组更新中，可以使用 Vue.set()方法来添加或修改数组元素，从而触发视图更新。
使用 splice()方法：splice()方法可以在任意位置添加或删除数组元素，同时也可以触发视图更新。这个方法接受三个参数：起始索引、要删除的元素数量和要添加的元素。如果只添加元素而不删除元素，可以将第二个参数设置为 0。

46.请问什么是 SSR，它主要解决什么问题?

SSR，即服务端渲染（Server-Side Rendering），是一种将原本由客户端（通常是浏览器）执行的页面渲染工作转移至服务器端的渲染技术。在 SSR 中，服务器会预先渲染好页面，然后将渲染好的 HTML 字符串直接发送给客户端。

SSR 主要解决以下几个问题：

首屏加载速度：通过预先渲染页面，用户可以在下载 HTML 的同时并行下载其他资源（如 CSS、JavaScript 等），从而加快首屏加载速度，提供更好的用户体验。
SEO优化：搜索引擎爬虫更易于解析和索引由 SSR 生成的静态 HTML 页面，从而提高网站的搜索引擎排名和可见性。
客户端性能问题：对于一些性能较弱的客户端设备或网络环境较差的情况，SSR 可以减轻客户端的渲染负担，提高页面的加载速度和稳定性。

缺点：

开发限制：SSR 要求开发者在编写组件时，需要考虑到服务器端和客户端环境的差异，不能过度依赖客户端环境。这可能会增加开发的复杂性。
服务器压力增加：由于页面在服务器端进行渲染，这会增加服务器的负载压力，尤其是在高并发场景下，可能会对服务器性能产生较大影响。
调试困难：SSR 的调试过程相对复杂，需要同时考虑到服务器端和客户端的日志和错误信息，这对于开发者来说可能是一个挑战。

47.Vue 路由的使用以及如何解决在 router-link 上添加点击事件无效的情况 ?

在 <router-link> 上添加点击事件，但发现事件无效。这是因为 <router-link> 默认会阻止事件冒泡，所以如果你直接在 <router-link> 上添加点击事件，它可能不会被触发。

为了解决这个问题，你可以使用 @click.native 来监听原生 DOM 事件，或者使用事件修饰符 .native。这样，你就可以在 <router-link> 上添加点击事件了：

<template>
  <div>
    <router-link to="/" @click.native="handleClick">Home</router-link>
    <router-link to="/about" @click.native="handleClick">About</router-link>
  </div>
</template>

但是，请注意，使用 @click.native 并不是 Vue 推荐的做法，因为它依赖于内部实现细节。更好的做法是使用一个包装元素来添加点击事件，同时保留 <router-link> 用于导航：

<template>
  <div>
    <div @click="handleClick">
      <router-link to="/">Home</router-link>
    </div>
    <div @click="handleClick">
      <router-link to="/about">About</router-link>
    </div>
  </div>
</template>

这样，你就可以在包装元素上添加点击事件，同时保留 <router-link> 的导航功能。

48.vue 通过数据劫持可以精准的探测数据变化，为什么还要进行 diff 检测差异?

Vue 通过数据劫持（Object.defineProperty 或 Proxy）确实可以精准地探测到数据的变化，但这并不意味着 Vue 不需要进行 diff（差异检测）来更新视图。实际上，Vue 的更新机制是数据劫持和 diff 两者共同作用的结果。以下是为什么 Vue 仍然需要进行 diff 检测的原因：

性能优化：直接操作 DOM 是昂贵的，因此 Vue 采用虚拟 DOM 来描述真实 DOM 的结构。当数据发生变化时，Vue 会生成一个新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行 diff。这样，Vue 就可以计算出最小化的 DOM 操作，从而提高性能。如果没有 diff 过程，Vue 可能需要遍历整个 DOM 树来更新视图，这将是非常低效的。
组件化：Vue 是一个组件化的框架，一个页面可能由多个组件组成。当某个组件的数据发生变化时，Vue 需要确定哪些组件需要更新，哪些组件不需要更新。通过 diff，Vue 可以精确地定位到需要更新的组件，并只对这些组件进行渲染和更新。
复杂的更新逻辑：在某些情况下，数据的变化可能并不会直接映射到 DOM 的变化。例如，当列表数据的顺序发生变化时，Vue 需要重新排序 DOM 元素而不是简单地替换它们。通过 diff，Vue 可以识别出这种复杂的更新逻辑，并生成正确的 DOM 操作。
条件渲染和循环渲染：Vue 支持条件渲染（如 v-if）和循环渲染（如 v-for）。在这些情况下，数据的变化可能会导致 DOM 结构的完全改变。通过 diff，Vue 可以准确地计算出这些变化，并生成相应的 DOM 操作。

49.Vue2.0 和 Vue3.0 的区别？

Vue 2.0 和 Vue 3.0 之间的区别主要体现在以下几个方面：

响应式系统：Vue 3.0 对响应式系统进行了彻底的重写，从使用 Object.defineProperty 方法转变为使用 Proxy 代理对象。这种改变带来了更好的性能和响应式能力，使得数据变化能够被更精准和高效地捕获。
性能优化：Vue 3.0 在性能上进行了多项优化。它采用了更高效的渲染机制，减少了虚拟 DOM 更新的次数，从而提高了渲染速度。同时，Vue 3.0 通过静态分析和编译优化，使得打包后的文件体积更小，有助于减少应用的首次加载时间和渲染延迟。
API 更新与扩展：Vue 3.0 引入了新的 Composition API，它提供了一种更灵活、更可复用的代码组织方式。相较于 Vue 2.0 中的 Options API，Composition API 将组件逻辑拆分成独立的函数，使得代码更易于理解和维护。此外，Vue 3.0 还扩展了 API 的功能，如提供了 Teleport 和 Suspense 等新特性，用于处理更复杂的组件场景。
按需引入：在 Vue 2.0 中，通过 new 关键字创建的 Vue 实例包含了所有功能，无论是否使用到。而在 Vue 3.0 中，开发者可以使用 ES module imports 按需引入所需的组件和功能，这有助于减少不必要的代码加载，提高应用的启动速度。
项目结构与配置：Vue 3.0 对项目的结构和配置进行了调整。例如，它移除了 Vue-cli 2.0 中的 config 和 build 文件夹，以及 static 静态文件夹，使得项目结构更加简洁。同时，Vue 3.0 也提供了更多的配置选项和工具，使得开发者能够更灵活地定制项目的构建和部署过程。
TypeScript 支持：Vue 3.0 更好地支持 TypeScript，提供了类型声明文件，使得开发者可以使用 TypeScript 来编写 Vue 组件，享受类型检查和自动补全等特性。

50.Vue3 带来了什么改变？

Vue 3 带来了许多重要的改变和进步，使得开发者能够更高效地构建复杂的前端应用。以下是一些主要的改变：

更快的渲染性能：Vue 3 使用了重写的响应式系统，采用 Proxy 代理对象替代了 Vue 2 中的 Object.defineProperty。这种改变使得响应式系统更加高效，对于嵌套对象和数组的处理也更加灵活。此外，Vue 3 还引入了虚拟 DOM 的优化，通过减少不必要的 diff 过程和属性更新，使得组件的渲染速度更快。
更小的包大小：Vue 3 采用了模块化的设计，将核心功能和额外的特性进行了拆分。这意味着开发者可以按需加载所需的模块，减小了应用的整体体积。此外，Vue 3 还利用了 Tree-shaking 技术，自动删除未使用的代码，进一步减少了包的大小。（打包大小减少 41%、初次渲染快 55%、更新渲染快 133%
、内存占比少 54%）
Composition API：Vue 3 引入了 Composition API，这是一种基于函数的 API，使得开发者可以更加灵活地组织和重用组件逻辑。通过 Composition API，开发者可以将组件的逻辑拆分成独立的函数，提高了代码的可维护性和复用性。
更好的类型支持：Vue 3 提供了更好的 TypeScript 支持，使得开发者可以利用 TypeScript 的类型检查和自动补全功能，提高代码的质量和可维护性。
新增的特性：Vue 3 还引入了一些新的特性，如 Teleport（用于跨组件的渲染）、Suspense（用于处理异步组件加载的状态）和 Fragment（用于更灵活地处理组件的根节点）。这些特性使得开发者能够更方便地处理复杂的组件场景和提供更好的用户体验。

51.Vue3.0 中的响应式原理是什么，和 Vue 有什么区别？

Vue 3.0 中的响应式原理主要基于 Proxy 对象来实现。具体来说，当一个组件的 data 函数返回一个普通的 JavaScript 对象时，Vue 3.0 会将该对象包裹在一个带有 get 和 set 处理程序的 Proxy 中。由于 Proxy 是一个对象，它包装了另一个对象并允许你拦截对该对象的任何交互，因此 Vue 3.0 可以直接对对象属性进行删除和修改。这种机制使得 Vue 3.0 的响应式系统更加高效和灵活。

与 Vue 2.0 相比，Vue 3.0 的响应式原理有以下显著区别：

Vue 2.0 是通过 Object.defineProperty() 对对象的属性进行读取、修改拦截（数据劫持）来实现响应式的。对于数组类型，Vue 2.0 通过重写更新数组的一些方法来实现拦截。然而，这种方式存在一些局限性，比如对于新增的属性或删除的属性，界面不会自动更新，需要使用特定的方法如 this. $se t 和 t hi s .$ delete 来强制更新。此外，直接修改数组的下标界面也不会更新。
Vue 3.0 则通过 Proxy 代理对象来实现响应式，这种方式更加灵活和高效。Proxy 可以直接对对象属性进行删除和修改，无需使用额外的方法。同时，Vue 3.0 的响应式系统还支持对数组下标和 length 属性的改变进行检查。

总的来说，Vue 3.0 的响应式原理相比 Vue 2.0 更加先进和高效，通过 Proxy 对象提供了更强大的拦截和修改能力，使得开发者能够更方便地处理复杂的前端应用。

52.生命周期（vue2 和 vue3 的生命周期对比）有哪些？

vue2 生命周期：（8 个阶段）

beforeCreate：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created：实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
mounted：el 被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个 in-document 元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器都会被移除，所有的子实例也会被销毁。

vue3 生命周期：

setup：这是 Vue 3 新增的生命周期钩子，它在组件创建之前执行，是 Composition API 的入口点。它接收两个参数：props 和 context。
onBeforeMount 和 onMounted：分别对应 Vue 2 的 beforeMount 和 mounted。
onBeforeUpdate 和 onUpdated：分别对应 Vue 2 的 beforeUpdate 和 updated。
onBeforeUnmount 和 onUnmounted：分别对应 Vue 2 的 beforeDestroy 和 destroyed。

此外，Vue 3 还引入了两个新的生命周期钩子：

onActivated：当被 keep-alive 包裹的组件被激活时调用。
onDeactivated：当被 keep-alive 包裹的组件被停用时调用。

另外，Vue 3 也提供了一个错误处理的钩子：

onErrorCaptured：在捕获到子组件或自身组件的错误时调用。

53.vue3 的常用 Composition API 有哪些？

Vue 3 的 Composition API 提供了一组函数，使得开发者能够更灵活、更高效地组织和复用组件逻辑。以下是一些常用的 Composition API：

setup()：
setup() 函数是 Composition API 的入口点，它接收 props 和 context 作为参数，返回一个对象，该对象中的属性和方法可以在模板中直接使用。setup() 在组件创建之前执行，且只在初始化时执行一次。
ref() 和 reactive()：
ref() 和 reactive() 是用于创建响应式数据的函数。ref() 用于处理基本数据类型，返回一个包装对象，其 .value 属性包含响应式数据；reactive() 用于处理对象或数组，直接返回响应式对象。
toRefs()：
当你想在模板中直接访问 reactive() 创建的响应式对象的属性时，可以使用 toRefs() 函数。它会将响应式对象的每个属性转换为一个单独的 ref 对象，从而可以在模板中直接通过属性名访问。
computed()：
computed() 用于创建计算属性，它基于响应式数据的依赖进行缓存。只有当相关依赖发生变化时，计算属性才会重新计算。
watch() 和 watchEffect()：
这两个函数用于观察和响应 Vue 组件中的响应式数据变化。watch() 允许你指定要观察的数据源和回调函数，而 watchEffect() 则会自动收集依赖并在依赖变化时执行回调函数。
provide() 和 inject()：
这两个函数用于实现依赖注入，允许祖先组件向其所有子孙组件提供一个依赖。provide() 在祖先组件中设置依赖，而 inject() 在子孙组件中接收依赖。
useContext()：
useContext() 函数允许你在 setup() 函数内部访问组件的上下文。这包括 attrs、slots、emit 等属性，使得在 Composition API 中能够更方便地处理属性和插槽。
其他 Composition API 函数：
Vue 3 还提供了其他一些 Composition API 函数，如 useState()、useReducer() 等，这些函数使得 Vue 更加接近 React 的函数式编程风格，为开发者提供了更多的灵活性和选择。

54.ref 和 reactive 的原理？

ref的原理是基于 JavaScript 的Object.defineProperty方法。当使用ref创建响应式数据时，Vue 会在内部创建一个对象，并使用Object.defineProperty来定义这个对象的value属性。这个属性具有一个 getter 和 setter，当访问或修改value时，会触发相应的逻辑来处理依赖收集和更新。

reactive的原理是基于 ES6 的 Proxy 对象。当使用reactive创建响应式数据时，Vue 会返回一个 Proxy 代理对象。这个代理对象会拦截对原始对象的访问和修改操作，并在内部进行依赖收集和更新处理。具体来说，当访问或修改代理对象的属性时，会触发相应的 trap 函数（如get和set），Vue 会在这些函数中处理依赖收集和更新逻辑。

55.vue scoped 能做样式隔离的原理？

唯一选择器生成：当 Vue 编译单文件组件时，如果 style 标签带有 scoped 属性，Vue 会为每个样式选择器生成一个唯一的属性选择器。这个唯一的属性选择器类似于[data-v-xxxxxxx]，其中xxxxxxx是一个唯一的标识符。
编译时转换：在编译过程中，Vue 会解析单文件组件的模板，并对具有 scoped 特性的样式进行处理。具体的处理方式是，将原有的选择器转换为带有这个唯一属性选择器的形式。例如，.class会被转换为.class[data-v-xxxxxxx]。
渲染时应用：在组件渲染为 DOM 时，Vue 会在组件的根元素上添加一个属性值为唯一标识符的属性，例如data-v-xxxxxxx。这样，每个组件的 DOM 元素都会带有这个独特的标识符。

56.Vue-cli 项目中 assets 和 static 文件夹的异同点？

相同点：

存放静态资源：assets和static文件夹都用于存放项目中的静态文件，包括但不限于项目中使用到的图片、字体图标、样式文件等。
在 HTML 中使用：无论是assets还是static文件夹中的资源，在 HTML 中都可以直接使用路径来访问。

不同点：

文件处理：
- assets文件夹中的文件会经过 webpack 的编译和处理。在打包时，webpack 会对这些文件进行压缩、优化，对未引用的图片进行过滤，对 url 等引用方式会进行 base64 转换，从而在一定程度上减小文件体积，提高加载效率。
- static文件夹中的文件则不会经过 webpack 的编译和处理，它们会被直接复制到最终的打包目录（通常是dist/static）下。因此，static文件夹中的文件会保持原样，不会进行任何压缩或优化。
引用方式：
- 在assets文件夹中，文件引用时通常使用相对路径。由于文件会经过 webpack 处理，因此在 js 中使用时，路径也需要经过 webpack 的 file-loader 编译。
- 在static文件夹中，文件引用时必须使用绝对路径。由于文件不会经过 webpack 处理，因此可以直接使用绝对路径来引用这些文件。
推荐存放的资源类型：
- assets文件夹更适合存放那些只有组件自己使用到的静态资源，如一些 menu 的背景图片等。这些资源在打包时会被编译和优化，以减小文件体积。
- static文件夹则建议存放一些外部第三方（公用）的静态资源文件，如 iconfont.css 等。这些文件已经经过处理，不需要再次编译，可以直接使用。此外，static也适合存放可能会被频繁更换的图片（如商品图片等），因为直接复制的文件可以随时进行替换，而不需要重新编译整个项目。

57.react 和 vue 有哪些不同，说说你对这两个框架的看法?

React 和 Vue 都是目前非常流行的 JavaScript 框架，它们各自具有独特的特点和优势。以下是它们之间的一些主要不同点：

数据流与数据绑定：
- React 遵循单向数据流。在 React 中，数据从组件的 state 属性流向渲染的 DOM。这种单向数据流有助于保持应用的清晰性和可预测性。
- Vue 则采用双向数据绑定。在 Vue 中，数据可以在组件之间双向流动，这在一定程度上简化了数据的交互和处理。
语法与渲染：
- React 使用 JSX 语法来描述 UI。JSX 是一种在 JavaScript 中编写 HTML 的语法，它提供了更直观的方式来描述组件的结构和样式。然而，JSX 需要编译才能在浏览器中运行。
- Vue 则使用模板语法来描述 UI。这种语法类似于 HTML，更易于理解和使用，且可以直接在浏览器中运行。
组件结构：
- React 的组件是纯函数，它们的输出完全取决于输入。组件的状态管理主要依赖于 state 和 props。
- Vue 的组件则是有状态的，它们可以通过数据和方法来控制。在 Vue 中，数据由 data 属性在 Vue 对象中进行管理。
组件嵌套：
- 在 React 中，子组件通过 props 接收父组件传递的数据和方法，包括 props.children 用于将标签内的部分传递给子组件。
- Vue 则通过 slot 插槽进行嵌套传递，这种方式更为灵活和直观。
构建与更新策略：
- React 的虚拟 DOM 在每次应用状态改变时，会重新渲染整个组件树，除非使用 shouldComponentUpdate 等生命周期方法来进行优化。
- Vue 则通过跟踪每个组件的依赖关系，实现更精细的更新策略，只重新渲染需要更新的部分。
开发体验：
- React 的生态系统庞大，有很多优秀的工具和库可供使用，如 Redux 用于状态管理，React Router 用于路由等。这使得 React 具有极强的可扩展性。
- Vue 则更注重开发者的体验，通过提供简洁直观的 API 和工具，使得开发者能够更快速地构建应用。Vue 的渐进式开发理念也使其易于集成到现有项目中。

对于这两个框架的看法，我认为它们都是非常优秀的 JavaScript 框架，各自具有独特的优势和适用场景。React 的单向数据流和组件化思想使得它非常适合构建大型、复杂的应用，而 Vue 的双向数据绑定和简洁的语法则使得它更适合快速原型开发和中小型项目。在选择使用哪个框架时，应根据项目的具体需求和团队的技术栈来做出决策。

Anislandwhale

关注

26
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
【前端面试题】：Vue篇

组件复用性：Vue 组件设计初衷就是为了复用。当我们在不同地方多次使用同一个组件时，每个组件实例都应该拥有自己独立的状态，而不是共享同一个状态。将data定义为函数可以确保每次复用组件时都会返回一个新的状态对象，从而避免状态污染。组件独立性：组件的独立性是其封装性的体现。通过将data定义为函数，每个组件实例都能创建并维护自己的私有数据空间。这保证了组件内部状态的独立性，使得组件的逻辑更加清晰和可控。响应式系统：Vue 的响应式系统依赖于组件的data。将data。
复制链接

扫一扫