Vue前端面试整理（持续更新）

一、对vue的理解

1.vue是一个渐进式式框架

我对渐进式的理解是，一开始你可以只使用声明式渲染，让你的代码更简单，随着项目复杂，然后你可以使用组件系统让项目结构清晰，再大一些的项目，引入了路由，进行路由管理，在引入一个大规模状态管理（vuex、pina），构建工具（webpack、vite）

2.命令时编程和声明式编程

命令式编程

• 特点：命令式编程关注如何实现某个目标，开发人员需要详细指定每一个步骤以达到预期的结果。
• 示例：使用命令式编程来实现一个循环，需要明确指定循环的起始点、结束条件、迭代逻辑等。
• 优点：对于一些需要精细控制流程和状态的复杂任务，命令式编程通常更直观和易于理解。
• 缺点：可能会导致代码冗长、难以维护，尤其是在处理大规模复杂逻辑时。

声明式编程

• 特点：声明式编程更关注描述目标是什么，而不是如何实现它。开发人员定义所需的结果，而非详细的步骤。
• 示例：使用声明式编程来筛选一个数组，只需要声明筛选的条件，而不需要编写循环和条件语句。
• 优点：代码更加简洁、易读，减少了冗余的细节，提高了可读性和可维护性。
• 缺点：可能在某些情况下，声明式风格可能难以达到灵活性和精确控制。
  

3.MVVM模式

MVC

在讲mvvm之前先讲一些mvc。在前后端分离之前，视图层是由服务层在后端直接控制。
MVC（Model-View-Controller）是一种常见的软件架构模式，用于组织代码和实现用户界面和应用逻辑之间的分离。MVC模式由三个核心组件构成：模型（Model）、视图（View）和控制器（Controller）。

1.模型（Model）：

• 模型代表应用程序中用于处理数据、业务逻辑和数据库交互的部分。
• 模型负责管理应用程序的数据状态，响应数据变化，并且通常包含与数据相关的操作和行为。
• 模型与数据库、文件系统或其他数据存储交互，以获取或更新数据。

视图（View）：

• 视图是用户界面的表示，负责呈现数据给用户并接收用户的输入。
• 视图可以是页面、窗口、控件或其他用户界面的元素。它们通常从模型中获取数据，然后将其呈现给用户。

控制器（Controller）：

• 控制器是模型和视图之间的中介，负责处理用户的输入、调度对应的行为，并更新模型和视图。
• 控制器接收用户的输入（如点击、键盘输入等），根据输入调用相应的方法来更新模型的状态，然后更新视图以反映模型的变化。
  MVC模式的优势在于它能够将应用程序的数据、视图和逻辑分离开来，使得各部分可以相对独立地进行开发、测试和维护。这种分离也促进了代码的重用和可扩展性，因为更容易替换或修改其中的一个部分而不影响其他部分。
  在前后端分离之后，关于视图层的处理交给到前端。这时候就可以发现，数据在js中，视图层在html中，可以借用之前后端的mvc模式，于是前端的mvc诞生，逻辑和后端相同。

MVVM

• 古早前端mvc模式实现：Backbone + underscore + jquery
  前端采用mvc模式的缺点就是，越来越多的实现操作放在controller中，越来越多的逻辑以及对页面的操作放在controller中。代码复杂化，维护非常困难。
  这个时候MVVM隆重登场，MVVM模式简化了controller，而是采用了一种映射关系，数据和视图绑定在了viewModel视图模型上（controller被隐藏），我们不需要要去写controller，而是直接进行数据和视图的绑定就可以了。
  
  ！！！vue不是mvvm模式
  传统的mvvm模式数据不能跳过viewModel进行数据和视图的绑定，但是vue中 ref就绕过了viewModel。所以vue没有完全借鉴mvvm模式，而是添加了自己的一些API。
  虽然没有完全遵守MVVM模型，但是vue的设计收到了很多启发，因此vue的官方文档经常会使用vm（viewModel的缩写）这个变量来标识vue实例。

4.虚拟DOM

想象一下，你有很多玩具积木，要建一个漂亮的城堡。建城堡的时候，你可以先用纸写下每个积木的形状、颜色和位置，然后按照这张纸的指示一块一块地堆积积木，最后就能建好城堡了。

在Vue里面，虚拟DOM就像是这张纸，它记录了网页上所有元素的信息，比如文字、图片、按钮等等。当需要更新网页内容时，Vue会先通过对比新旧虚拟DOM找出有变化的部分，然后只更新这些变化的部分，而不是重新从头开始建立整个网页，就像按照纸上的指示修改城堡一样。这样做可以让网页更新更快更高效。

1.虚拟DOM可以实现跨平台
2.减少操作真实DOM的频率
（这里只是对虚拟dom进行一个简单讲解，后续会深入）

5.区分编译（打包）和运行（游览器）时

虚拟DOM是前端框架中常用的一种技术，用于处理用户界面的更新。与编译时和运行时类似，虚拟DOM也有区别。

1.编译时：

• 编译时的虚拟DOM指的是模板的解析和编译过程，将模板转换为可执行的渲染函数。
• 在编译时，虚拟DOM可以帮助我们分析和优化模板，提高渲染性能。

2.运行时：

• 运行时的虚拟DOM指的是渲染函数生成的虚拟DOM树。
• 在运行时，虚拟DOM可以帮助我们比较新旧DOM树之间的变化，只更新有变化的部分，从而减少不必要的DOM操作和重绘，提高渲染性能。

如何区分编译时和运行时的虚拟DOM呢？可以简单理解为编译时的虚拟DOM主要针对模板的解析和编译，而运行时的虚拟DOM则是在模板编译完成之后，在实际渲染过程中起作用。编译时的虚拟DOM主要和编译器相关，而运行时的虚拟DOM主要和渲染器相关。

在Vue框架中，编译时的虚拟DOM由编译器负责处理，运行时的虚拟DOM则由渲染器负责处理。这两个阶段的虚拟DOM都是为了提高渲染性能而设计的，但它们的作用范围和实现方式略有不同。

5.组件化

实现高内聚、低耦合、单向数据流

• 组件化开发能大幅提高应用开发效率、测试性、复用性等;·
• 降低更新范围，只重新渲染变化的组件

二、对于SPA的理解

SPA（Single Page Application）和MPA（Multi-Page Application）是两种常见的Web应用程序架构模式，它们有着不同的特点和适用场景。

SPA（单页面应用）：

特点：SPA指的是整个Web应用程序只有一个HTML页面，通过动态加载内容来实现页面切换和交互。通常使用JavaScript框架（如Vue.js、React等）来实现。
优点：
用户体验好：页面切换快速，无需每次跳转都重新加载整个页面。
前后端分离：前端负责页面呈现和交互逻辑，后端负责提供API接口，降低了开发的耦合度。
可维护性：前后端分离使得代码更易维护，前端和后端可以独立开发和测试。
缺点：
初次加载时间长：首次加载需要下载所有相关的JavaScript和CSS资源，可能会导致较长的初始加载时间。
SEO难度大：由于大部分内容是通过JavaScript动态生成的，对搜索引擎的抓取和索引有一定挑战。

MPA（多页面应用）：

特点：MPA指的是整个Web应用程序由多个独立的HTML页面组成，每次页面跳转都经过服务器请求和页面刷新。
优点：
初次加载速度快：每个页面都是独立的，因此可以针对不同页面进行优化，提高初次加载速度。
更利于SEO：每个页面都有自己的URL，更容易被搜索引擎抓取和索引。
缺点：
用户体验差：页面切换需要完整的页面加载和渲染，用户体验相对较差。
开发维护复杂：多个页面之间可能存在重复的代码和逻辑，开发和维护相对复杂。
区别：

页面加载方式：SPA通过动态加载内容实现页面切换，而MPA则是通过服务器请求和页面刷新来切换页面。
整体架构：SPA更倾向于前后端分离，通过API来实现数据交互；而MPA则更传统，前后端更紧密地结合在一起。
适用场景：

SPA适合对用户体验要求较高的应用，如社交网络、在线工具等。
MPA适合内容较为独立，对SEO要求较高的应用，如新闻网站、企业官网等。
综上所述，SPA和MPA各有优缺点，选择合适的架构模式需要根据具体的应用场景和需求来决定。

解决SPA首屏加载慢以及SEO问题

• 1.·静态页面预渲染(Static Site Generation)SSG，在构建时生成完整的html页面。(就是在打包的时候,先将页面放到浏览器中运行一下，将HTML保存起来)，仅适合静态页面网站。变化率不高的网站
• 2. SSR + CSR的方式，首屏采用服务端渲染的方式，后续交互采用客户端渲染方式。Nuxtjs

三、对于虚拟DOM的理解

基本理解

• Vitual DOM就是用js对象来描述真实DOM，是对真实DOM的抽象，由于直接操作DOM性能低但是js层的操作效率高，可以将DOM操作转化成对象操作，最终通过diff算法比对差异进行更新DOM(减少了对真实DOM的操作)。
• 虚拟DOM不依赖真实平台环境从而也可以实现跨平台。

VDOM是如何生成的?

• 在vue中我们常常会为组件编写模板- template·
• 这个模板会被编译器编译为渲染函数-render
• 在接下来的挂载过程中会调用render函数，返回的对象就是虚拟dom
• 会在后续的patch 过程中进—步转化为真实dom。

VDOM 如何做 diff 的?

• 挂载过程结束后，会记录第一次生成的 VDOM-oldVnode
• 当响应式数据发生变化时，将会引起组件重新render，此时就会生成新的VDOM-newVnode使用 oldVnode 与 newnode 做 dif操作，将更改的部分应到真实 DOM 上,从而转换为最小量的 dom操作，高效更新视图

四、谈-谈对 Vue 组件化的理解

webcomponent 组件化的核心组成:模板、属性、事件、插槽、生命周期。
组件化好处: 高内聚、可重用、可组合

• 组件化开发能大幅提高应用开发效率、测试性、复用性等;
• 降低更新范围，只重新渲染变化的组件;
  补充:
• vue中的每个组件都有一个渲染函数 watcher、effect。
• 数据是响应式的，数据变化后会执行watcher或者effect。
• 组件要合理的划分，如果不拆分组件，那更新的时候整个页面都要重新更新。
• 如果过分的拆分组件会导致watcher、effect产生过多也会造成性能浪费。

五、既然 Vue 通过数据劫持可以精准探测数据变化，为什么还需要虚拟 DOM 进行 diff 检测差异?

Vue 内部设计原因导致，vue 设计的是每个组件一个 watcher(渲染 watcher)，没有采用一个属性对应一个 watcher。如果采用一个属性对应一个 watcher这样会导致大量 watcher 的产生而且浪费内存，如颗粒度过低也无法精准检测变化。所以采用diff 算法+组件级 watcher。

六、请说一下你对响应式数据的理解?

1 如何实现响应式数据

• 数组和对象类型当值变化时如何劫持到。对象内部通过defineReactive方法，使用object.defineProperty将属性进行劫持(只会劫持已经存在的属性)，数组则是通过重写数组方法来实现。多层对象是通过递归来实现劫持。vue3则采用 proxy

2 vue2 处理缺陷

• 在 vue2 的时候使用 defineProperty 来进行数据的劫持,需要对属性进行重写添加getter及setter 性能差。
• 当新增属性和删除属性时无法监控变化。需要通过$ set、$ delete 实现
• 数组不采用 defineProperty 来进行劫持(浪费性能，对所有索引进行劫持会造成性能浪费)需要对数组单独进行处理，
• 对于 ES6 中新产生的 Map、Set 这些数据结构不支持。

3 vue2和vue3实现区别

• vue2
  
• vue3

七、vue 中如何检测数组变化?

1.1 实现数组劫持

• 数组考虑性能原因没有用defineProperty对数组的每一项进行拦截，而是选择重写数组(push,shift,pop,splice,unshift,sort,reverse)方法法
• 数组中如果是对象数据类型也会进行递归劫持

1.2 数组的缺点

• 数组的索引和长度变化是无法监控到的

八、Vue 中如何进行依赖收集?

1.1 依赖收集的流程

• 每个属性都拥有自己的dep 属性，存放他所依赖的 watcher，当属性变化后会通知自己对应的 watcher去更新
• 默认在初始化时会调用 render 函数，此时会触发属性依赖收集 dep.depend
• 当属性发生修改时会触发watcher更新 dep.notify()

1.2 vue3依赖收集

• vue3中会通过Map结构将属性和effect映射起来
• 默认在初始化时会调用 render函数，此时会触发属性依赖收集track
• 当属性发生修改时会找到对应的effect列表依次执行trigger

九、vue.set 方法是如何实现的

因为vue 不允许在已经创建的实例上动态添加新的响应式属性。
所以新添加的属性是无法实现响应式拦截的，下面是vue。set源码的一个判断过程，想看vue源码的大佬可以自己去手撕。

• 1.是开发环境 target 没定义或者是基础类型则报错

• 2.如果是数组，调用我们重写的splice方法(这样可以更新视图)

• 3.如果是对象本身的属性，则直接添加即可

• 4.如果是vue实例 或 根数据data时 报错,(更新_data 无意义)

• 5.如果不是响应式的也不需要将其定义成响应式属性if

• 6.将属性定义成响应式的defineReactive(ob.value,key，val);

• 通知视图更新ob.dep.notify();

当我们选择新增属性时，可以考虑使用对象合并的方式实现

this.info = {...this.info,...{newProperty1:1,newProperty2:2 ...}}

十、vue中的v-if和v-show怎么理解？

v-if 和 v-show

• 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
• 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
• 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且DOM元素保留；
• 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
• 使用场景：v-if适合条件不大可能改变的切换场景；v-show适合频繁切换。

十一、 computed 和 watch 的区别

• computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。
• watch 侦听器 : 更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

十二、ref 和 reactive 的区别

在 Vue 3 中，ref 和 reactive 都是用于创建响应式数据的函数，但它们有一些重要的区别：

ref：（底层采用defineProperty 来进行劫持）

ref 用于创建一个包含基本类型值或对象的响应式引用。
当你想要创建一个简单的响应式数据，比如数字、字符串、布尔值等，可以使用 ref。
使用 ref 创建的响应式数据，需要通过 .value 来访问和修改其值。
示例：

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 访问值
count.value++; // 修改值

reactive：（底层采用proxy 来进行劫持）

reactive 用于创建一个包含对象的响应式代理，可以是普通对象、数组等复杂数据类型。
当你想要创建一个复杂的响应式数据，例如对象、数组或嵌套结构，可以使用 reactive。
使用 reactive 创建的响应式数据，可以直接访问和修改内部属性。
示例：

import { reactive } from 'vue';

const state = reactive({
    count: 0,
    message: 'Hello',
    nested: {
        value: 'Nested Value'
    }
});

console.log(state.count); // 直接访问属性
state.count++; // 直接修改属性

总的来说，ref 用于创建基本类型值或对象的简单响应式数据，而 reactive 用于创建包含对象的复杂响应式数据。

十三、watch 和 watchEffect 的区别？

在 Vue 3 中，watch 和 watchEffect 都是用于监视响应式数据变化并执行相应回调的函数，但它们之间有一些区别：

watch：

watch 是一个高阶函数，接受两个参数：要观察的数据源和回调函数，还可以接受一些配置选项。
可以监视响应式数据、计算属性、ref 等数据源的变化，并在数据变化时执行回调函数。
可以设置深度监听、立即执行回调、手动触发初始回调等选项。
示例：

import { watch, ref } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
    console.log(`count 值从 ${oldValue} 变为 ${newValue}`);
});

watchEffect：

watchEffect 是一个立即执行的函数，内部自动追踪其依赖，并在依赖变化时重新运行该函数。
不需要显式指定要监视的数据源，而是根据函数内部使用的响应式数据自动建立依赖关系。
适用于只关注数据变化而不需要访问前一个值的情况。
示例：

import { watchEffect, ref } from 'vue';

const count = ref(0);

watchEffect(() => {
    console.log(`count 当前值为: ${count.value}`);
});

总的来说，watch 更适合对特定数据源的变化进行监视，并且需要访问前一个值的情况；而 watchEffect 更适合无需显式指定数据源，只需关注数据变化并执行副作用的情况

打个比喻：假设你在玩一款电子游戏。watch 就像是你告诉游戏的“监视器”：当我的金币数量发生变化时，请通知我。所以每当你的金币数量改变，监视器就会通知你。

而 watchEffect 则更像是一个“魔法镜子”，它可以自动观察你的行为。当你拿起金币或者失去金币时，魔法镜子会自动观察到，并且告诉你发生了什么。

简单来说，watch 需要你明确地告诉程序你要监视哪些数据，而 watchEffect 则会自动地观察数据的改变。

十四、如何把template模板转化为render函数

vue的模版编译过程主要如下：template -> ast -> ast（新） -> render函数

• 第一步是将 模板字符串 转换成 抽象语法树（AST） - parserHTML
• 第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）
• 第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）

十五、new Vue（）这个过程中究竟做了些什么？

在 Vue 中，调用 new Vue() 这个过程中会做一系列的操作来初始化 Vue 实例，下面是 new Vue() 过程中的主要步骤：

1、初始化Vue实例：

• 首先，创建一个新的 Vue 实例，这个实例将成为我们应用程序的根实例。

2. 合并选项：

• Vue 在内部对传入的选项进行合并，包括组件选项、生命周期钩子、数据等。这些选项可以来自构造函数传入的选项，也可以来自于继承的父组件选项。

3.初始化生命周期：

• 设置初始状态，初始化生命周期钩子，如 beforeCreate 和 created 钩子。

4.初始化事件中心：

• 初始化事件中心，用于组件间的通信，包括 $ on、$ emit、$off 等方法。

5.初始化渲染：

• 处理模板编译成渲染函数，如果没有提供 render 函数，则会尝试编译模板。

6.初始化数据：

• 对数据进行响应式处理，包括 data 属性中的数据，以及 props、computed、watch 等。

7.初始化注入：

• 处理注入的依赖，如 provide 和 inject。

8.初始化组件：

• 对组件进行初始化，包括子组件的创建和挂载。

9.挂载实例：

• 最后，调用 $mount 方法将 Vue 实例挂载到 DOM 上，开始渲染视图。

总的来说，new Vue() 过程中会进行选项合并、生命周期初始化、事件中心初始化、渲染函数处理、数据响应式处理、注入处理、组件初始化等操作，最终将 Vue 实例挂载到 DOM 上，完成整个实例的初始化过程。

十六、vue.observable 有什么用

Vue.observable 是 Vue 提供的一个全局方法，用于创建一个可观察（响应式）的对象。这个方法通常用于在非组件的上下文中创建响应式数据。

使用 Vue.observable 方法可以将普通的 JavaScript 对象转换为具有响应式特性的对象，使得对象的属性可以自动追踪依赖和触发更新。这样，当对象的属性发生改变时，相关的视图会自动重新渲染。

以下是一个使用 Vue.observable 的示例：

import Vue from 'vue';

// 创建一个可观察对象
const state = Vue.observable({
  count: 0,
  message: 'Hello'
});

// 修改可观察对象的属性
state.count++;

// 在 Vue 组件中访问可观察对象的属性
export default {
  data() {
    return {
      state // 将可观察对象作为组件的数据
    }
  }
}

在上述示例中，我们首先通过 Vue.observable 方法创建了一个可观察对象 state，包含了 count 和 message 两个属性。然后，在需要修改或访问这些属性的地方，我们可以直接操作 state 对象。由于 state 是可观察的，当其中的属性发生改变时，与之相关的视图会自动更新。

需要注意的是，Vue.observable 方法只能用于创建对象级别的响应式数据，无法用于创建响应式的基本数据类型（如数字、字符串等）。如果需要创建组件级别的响应式数据，应该使用 data 选项或 vue.observable 方法来定义组件的数据。

十七、v-if 和 v-for 哪个优先级更高？

• 在vue2中，v-for的优先级大于v-if
• 在vue3 中，v-if的优先级大于v-for

不建议 v-for 和 v-if 用在一起

• 当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费
• 这种场景建议使用 computed，先对数据进行过滤

十八、生命周期

vue2的生命周期

beforeCreate：

• 在实例初始化之后，数据观测（data observer）和事件配置（event/watcher setup）之前被调用。
  主要用于在实例初始化之后，但是在数据观测和事件配置之前需要进行一些初始化操作，比如可以在这里进行一些数据的预处理。

created：

• 实例创建完成后被立即调用。
• 可以在这里访问数据、进行异步操作或设置初始状态。一般用于发起网络请求、初始化页面等操作。

beforeMount：

• 在挂载开始之前被调用：相关的 render 函数首次被调用。
• 可以在这个阶段进行一些准备工作，但是在真正的 DOM 挂载之前。

mounted：

• 实例挂载后调用，这时 el 被新创建的 vm.$el 替换了。
• 可以访问到渲染后的 DOM，并且执行 DOM 操作。通常用于初始化页面之后的工作，比如设置定时器、绑定事件等。

beforeUpdate：

• 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
• 可以在数据更新前进行一些额外的操作，通常用于获取更新前的状态或执行一些更新前的逻辑。

updated：

• 数据更新后调用，发生在虚拟 DOM 重新渲染和打补丁之后。
• 可以访问到更新后的 DOM，并执行 DOM 操作。通常用于更新后的操作，比如重新计算属性、重新渲染子组件等。

beforeDestroy：

• 实例销毁之前调用。在这一步，实例仍然完全可用。
• 可以在这里做一些清理工作，比如清除定时器、解绑事件等。

destroyed：

• 实例销毁后调用。
• 可以在这里做一些清理工作，比如解绑非 Vue 组件的事件监听器等。

vue3的生命周期

逻辑和vue2基本相同，销毁组件的生命周期换了一个名字，然后采用setup组合式API写法，所以调用生命周期的时候加个on，但是vue3不存在 onBeforCreate 和 onCreated 因为被setup取代了

十九、Vue中的diff算法原理

diff算法的作用就是比较差异，最小化更新视图

下面是diff算法的流程图

从流程图可以看到新老虚拟节点都有子节点时时会触发 updateChildren方法
updateChildren方法 会进行同级比较，在某一级不相同会直接删除旧的子节点，添加新的子节点，如果相同就继续向下一级比较。

在同级比较的时候采用的首尾指针法

以上面的图为例子，我们来讲解首尾指针法

1.oldstart 和 newstart 比较 ，比较失败，然后olds 和 newend比较，比较成功，根据新节点的位置移动a

2. 第一轮比较成功后，oldS向右移动，newE向左移动，然后又是oldS和newS比较，比较成功，根据新的节点移动b的位置

同理，c点移动

再次移动，发现oldS的位置在oldE的右边，整个对比结束了，然后真实DOM和newVnode比较，缺失d补上，如果真实DOM比newVnode长，则删除。

二十、为何在v-for中使用key

• key的作用就是给节点一个标识（这个标识最好是唯一的）
• diff算法中通过tag和key来判断是否复用节点（sameNode）
• 如果没有key，diff算法机会只比较节点，认为当前（已经发生变化）的节点和原本（没有变化之前）是相同的，则会重新设置该节点的属性，从而实现节点的更新，这个在只是更新的时候没有影响
• 但是如果是在节点列表的中间进行了删除或者增加就会出问题，如下图，原本是想在B和C之间插入F的，但diff算法会把C更新成F，D更新成C，E更新成D，最后再插入E，这样很没有效率
• key的作用主要是为了高效的更新虚拟DOM
• 另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果

为何在v-for中不建议使用index作为key

• 使用index 作为 key和没写基本上没区别，因为不管数组的顺序怎么颠倒，index 都是 0, 1, 2…这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。
• 当从节点列表的中间增加或者删除节点时就会出现问题
• 我们以从中间新增节点为例，新插入的节点就会被绑定上以前在这个位置的节点的key，后面的节点的key会依次递增，由于新增的节点绑定上了以前节点相同的key，diff算法就会认为节点没有变化，在更新时去复用原来的节点，这样就会导致新增的节点去继承原来这个位置节点的一些状态，导致bug

二十一、Vue.use

在使用第三方插件的时候:
- 如果插件是一个对象,必须提供install方法
- 如果插件是一个函数,它会被作为install方法
- install方法调用时,会将Vue作为参数传入,该方法需要在new Vue()之前被调用

import iView from 'iview'
Vue.use(iView)

那么Vue.use到底做了些什么事情呢? 以下是源码

import { toArray } from '../util/index'

export function initUse(Vue: GlobalAPI) {
  Vue.use = function(plugin: Function | Object) {
    const installedPlugins = this._installedPlugins || (this._installedPlugins = [])
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

我们由以上可以看出,plugin参数为函数或者对象类型,首先Vue会去寻找这个插件在已安装的插件列表里有没有,如果没有,则进行安装插件,如果有则跳出函数,这保证插件只被安装一次

接着通过toArray方法将参数变成数组,再判断plugin的install属性是否为函数,或者plugin本身就是函数,最后执行plugin.install或者plugin

二十二、Vue.extend

Vue.extend 是 Vue.js 中的一个全局方法，用于创建可复用组件的构造器。它的原理和作用如下：

原理：

• Vue.extend 方法接收一个包含组件选项的对象作为参数，并返回一个组件的构造函数。
  在内部，Vue.extend 会使用传入的组件选项创建一个新的子类构造函数，该构造函数继承自 Vue 的基类。
• 返回的构造函数可以通过 new 关键字实例化，从而创建一个具体的组件实例。

作用：

• 扩展现有的组件：Vue.extend允许我们通过继承一个已有的组件来创建一个新的组件，以便在功能上进行扩展和定制。这使得组件的复用性更高，可以减少代码的重复编写。
• 动态创建组件：可以在运行时使用 Vue.extend 创建组件的构造函数，并根据需要动态地实例化这些组件。这对于动态组件、异步组件等场景非常有用。
• 实现高阶组件：通过使用 Vue.extend 创建一个包装组件，可以将某些通用的逻辑或功能应用到多个组件中，从而实现高阶组件的概念。

示例：

// 创建一个基础组件
const MyBaseComponent = Vue.extend({
  template: '<div>My Base Component</div>',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
});

// 创建一个扩展组件
const MyExtendedComponent = Vue.extend({
  extends: MyBaseComponent,
  created() {
    this.greet(); // 调用基础组件方法
  }
});

// 实例化扩展组件
new MyExtendedComponent().$mount('#app');

通过 Vue.extend，我们可以基于现有的基础组件创建一个新的扩展组件，并在其中访问基础组件的选项和方法。这样就实现了组件的复用和功能的扩展。

二十三、vue中的data为什么是一个函数而不是对象?

在 Vue.js 中，为什么使用函数而不是对象来定义 data 呢？这其实涉及到 JavaScript 的闭包和引用类型的特性。

当我们在 Vue 实例中定义 data 时，如果直接将 data 属性设置为一个对象，比如：

data: {
  message: 'Hello, Vue!'
}

这样做虽然看起来简单直观，但会存在一个问题——所有组件实例共享同一个 data 对象，这可能导致数据的不可预料的变化和冲突。

为了避免这个问题，Vue.js 推荐我们将 data 定义为一个返回对象的函数，而不是一个普通的对象。这样每个组件实例都会有自己独立的 data 对象，相互之间不会相互影响。例如：

data() {
  return {
    message: 'Hello, Vue!'
  };
}

通过这种方式，每个组件实例都会调用该函数返回一个新的对象，确保了数据的独立性和隔离性，避免了数据共享带来的问题。

因此，将 data 定义为一个返回对象的函数，能够更好地保证数据在不同组件实例之间的独立性，避免出现意外的数据共享问题。

二十四、vue函数组件的优势

Vue函数式组件具有以下几个优势：

• 性能优化：函数式组件是无状态的，不会涉及到响应式系统的处理，因此渲染开销更小，对于一些只依赖于props的简单组件来说，函数式组件可以带来性能上的提升。

• 内存占用低：函数式组件不会创建实例，因此在内存占用上更加轻量级，适用于大量实例化的场景。

• 优化渲染：由于函数式组件的无状态特性，Vue在渲染过程中能够更好地进行优化，避免不必要的重新渲染。

• 代码简洁：函数式组件通常代码量更少，结构更清晰，适合编写简单的展示型组件，从而提高可读性和易维护性。

• 更好的抽象能力：函数式组件更加关注"输入和输出"，使得组件的抽象能力更强，可以更容易地进行复用。

总的来说，函数式组件适用于简单的、无需响应式系统支持的场景，能够带来性能、内存和代码简洁性的优势。但对于需要状态管理、生命周期钩子等特性的组件，传统的对象式组件仍然是更好的选择。

二十五、vue中的过滤器是什么，什么场景会用到，vue3为什么不用过滤器了

在 Vue.js 中，过滤器是一种用于转换模板中表达式的简单方式，它可以用于在数据呈现到视图之前对数据进行处理。过滤器通常在双花括号插值表达式（Mustache 插值）和 v-bind 表达式中使用。

例如，在模板中可以这样使用过滤器：

<p>{{ message | capitalize }}</p>

上面的例子中，capitalize 就是一个过滤器，它会将 message 中的文本转换为大写字母开头。

过滤器的主要作用在于对数据进行格式化、处理或筛选，常见的场景包括：

• 1、格式化文本：比如将文本转换为大写或小写，格式化日期等。
• 2、数据筛选：对数据进行筛选，例如根据条件只显示符合要求的部分数据。
• 3、数据处理：对数据进行特定的处理，比如格式化价格、千位分隔符等操作。

然而，Vue 3 中不再推荐使用过滤器的主要原因有几点：

• 过滤器是全局的，难以追踪：在较大的应用中，全局过滤器可能导致难以追踪和理解模板的数据转换逻辑，使得代码维护变得困难。

• 可以使用计算属性和方法替代：Vue 3 鼓励使用计算属性和方法来替代过滤器的使用。这样可以使数据转换的逻辑更加清晰，同时也更容易进行单元测试。

• 过滤器的性能问题：过滤器会增加模板渲染的开销，影响性能。而使用计算属性和方法可以更灵活地控制数据转换的时机，以提高性能。

总的来说，虽然过滤器在 Vue 2 中是一个方便的工具，但是在 Vue 3 中官方并不推荐使用过滤器，而是建议使用计算属性和方法来代替，以获得更好的可维护性和性能。

二十六、v-once

v-once 是 Vue.js 提供的一个指令，用于只渲染元素和组件一次，之后不再重新渲染。这在某些场景下可以提高性能，因为该元素或组件不会随着数据的变化而重新渲染。

使用 v-once 的主要场景包括：

静态内容：对于一些内容是静态的，不会根据数据变化而改变的情况下，可以使用 v-once 来确保这部分内容只渲染一次，减少不必要的性能开销。

优化性能：当某个部分的内容不需要被重新计算或更新时，可以使用 v-once 来避免不必要的重新渲染，提高页面性能。

示例：

<template>
  <div>
    <p v-once>这是静态内容，只会渲染一次</p>
    <p>{{ dynamicValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicValue: '动态内容'
    };
  }
};
</script>

在上面的示例中，第一个

标签使用了 v-once 指令，因此其中的内容只会在首次渲染时解析，之后即使 dynamicValue 的值发生变化，该部分内容也不会更新。

需要注意的是，使用 v-once 可能会导致一些副作用，比如无法动态更新内容、可能会影响到组件的状态等，因此在使用时需要谨慎考虑是否真的需要将某部分内容设置为静态

二十七、Vue.mixin

Vue.mixin 是 Vue.js 提供的一个全局方法，用于混入（mixins）一些组件选项。通过 mixin 可以将一些共享的逻辑、方法或数据混入到多个组件中，以避免重复编写相同的代码。

使用 Vue.mixin 可以在创建全局混入时，指定一些选项，这些选项会被混入到每个组件中。这样可以实现代码复用和逻辑分离，提高代码的可维护性和可重用性。

以下是一个简单示例，演示如何使用 Vue.mixin：

// 定义一个混入对象
const myMixin = {
  created() {
    console.log('Mixin created hook');
  },
  methods: {
    greet() {
      console.log('Hello from mixin!');
    }
  }
};

// 全局注册 mixin
Vue.mixin(myMixin);

// 创建一个组件
new Vue({
  created() {
    console.log('Component created hook');
  },
  mounted() {
    this.greet(); // 可以调用 mixin 中定义的方法
  }
}).$mount('#app');

在上面的示例中，myMixin 是一个包含 created 钩子函数和 greet 方法的混入对象。通过 Vue.mixin(myMixin) 将这个混入对象全局注册，然后在组件中就可以使用混入对象中定义的方法和钩子函数。

需要注意的是，混入会影响到所有组件，因此在使用时要确保混入的内容不会产生意外的副作用。另外，如果组件中定义的选项与混入中的选项发生冲突，组件选项会优先。

二十八、vue中的slot是如何实现的？什么时候使用它？

在Vue中，slot是一种用于分发组件内容的机制，允许父组件向子组件传递内容。通过使用slot，可以使得组件更加灵活，能够在不同的上下文中显示不同的内容。slot的实现依赖于Vue的插槽机制。

插槽的实现方式
在Vue中，可以通过使用标签来定义插槽，父组件可以在使用子组件时，将内容插入到对应的插槽中。例如：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

父组件使用子组件时，可以这样传递内容：

<template>
  <child-component>
    <p>This content will be distributed into the slot</p>
  </child-component>
</template>

何时使用slot

• 具名插槽：当需要父组件传递特定内容到子组件内部的不同位置时，可以使用具名插槽，通过为插槽指定名称来实现。
• 默认插槽：当子组件内部需要显示默认内容，但又希望父组件可以传递替代内容时，可以使用默认插槽。
• 作用域插槽：当子组件需要向父组件传递数据时，可以使用作用域插槽，通过在插槽中定义数据来实现。
  总之，slot提供了一种强大的机制，使得组件的内容可以更加灵活地由父组件控制，适用于需要动态传递内容或数据的场景，能够提高组件的可复用性和灵活性。

二十九、v-model

v-model 是 Vue.js 中常用的指令，用于实现表单元素和数据之间的双向绑定。通过 v-model，可以轻松将表单控件的值与 Vue 实例中的数据进行双向同步，简化了表单处理的逻辑。

具体来说，当我们在一个表单元素上使用 v-model 指令时，Vue.js 会根据元素的类型自动选取正确的方法来更新数据。常见的表单元素包括 、 和 。

例如，我们可以这样使用 v-model 来实现双向数据绑定：

<input v-model="message" placeholder="Enter message">
<p>{{ message }}</p>

在这个例子中，message 是 Vue 实例中的一个数据属性。当用户在输入框中输入内容时，message 的值会实时更新；反之，如果在 Vue 实例中修改了 message 的值，输入框中的内容也会随之更新。

总的来说，v-model 简化了表单元素与数据之间的交互，使得开发者无需手动监听输入事件或修改数据，实现了表单和数据的双向绑定。这样既减少了开发工作量，又提高了代码的可维护性和可读性。

三十、vue中 .sync修饰符的作用

在 Vue.js 中，.sync 修饰符用于简化父子组件之间的数据传递，特别是在子组件需要修改父组件数据时非常有用。.sync 修饰符实际上是一种语法糖，它可以让子组件直接修改父组件的数据，而不需要显式地触发事件来通知父组件进行数据更新。

使用 .sync 修饰符时，父组件通过一个属性将数据传递给子组件，并同时指定一个更新该属性的事件。子组件在修改这个属性时，会自动触发对应的更新事件，从而通知父组件进行数据的更新。

下面是一个使用 .sync 修饰符的例子：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :title.sync="parentTitle" />
  </div>
</template>

<script>
import ChildComponent from 'ChildComponent';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentTitle: 'Hello from parent'
    };
  }
}
</script>

<!-- 子组件 -->
<template>
  <input :value="title" @input="$emit('update:title', $event.target.value)" />
</template>

<script>
export default {
  props: ['title']
}
</script>

在上面的例子中，父组件通过:title.sync传递了parentTitle给子组件，并指定了更新事件为update:title。在子组件中，通过 $emit(‘update:title’, $event.target.value) 触发了update:title事件并传递了新的值。这样，当子组件修改了 title 的值时，会自动触发update:title事件，从而通知父组件对parentTitle进行更新。

总之，.sync 修饰符简化了父子组件之间的数据传递和更新过程，使得代码更加简洁和直观。

三十一、vue中递归组件的理解

在Vue中，递归组件是指一个组件在其自身的模板中调用自身的情况。这种情况下，组件会以递归的方式重复渲染和呈现，直到满足某个条件停止递归。

递归组件在解决某些问题时非常有用，特别是在处理树状结构或嵌套数据结构时。以下是递归组件的一些常见应用场景：

树状结构展示：当需要以树状结构展示数据时，递归组件可以很方便地处理无限层级的数据结构，每一层级都使用相同的组件进行渲染。

评论列表：当需要展示包含嵌套回复的评论列表时，递归组件可以处理嵌套的评论结构，使得代码更加简洁和可维护。

导航菜单：当导航菜单具有多级嵌套的情况下，递归组件可以轻松处理不同层级的菜单项。

使用递归组件的关键是设置递归结束的条件，以避免无限递归导致的堆栈溢出。通常可以通过在组件内部判断是否满足某个条件来决定是否继续递归调用自身。

以下是一个简单的示例，展示了如何使用递归组件来渲染树状结构的数据：

<

template>
  <div>
    <ul>
      <li v-for="item in treeData" :key="item.id">
        {{ item.name }}
        <recursive-component :treeData="item.children" v-if="item.children" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  }
}
</script>

在上述示例中，RecursiveComponent是递归组件，它接收一个名为treeData的prop，用于传递树状数据结构。在模板中，我们用v-for指令遍历treeData数组，并使用递归组件来处理子节点数据。

总的来说，递归组件是Vue中非常有用的特性，它能够简化处理树状结构或嵌套数据的场景，提高代码的可读性和可维护性。

三十二、件中写name选项有哪些好处及作用？

在Vue.js组件中，使用name选项可以为组件指定一个名称。指定组件名称有以下好处和作用：

• 递归组件：在递归组件中，通过给组件指定名称，可以让组件在自身模板中调用自身。这样就可以实现递归渲染，处理树状结构或嵌套数据。

• Devtools调试：在Vue开发者工具中，指定组件名称可以帮助开发者更容易地识别和跟踪组件实例，方便调试和查看组件层级关系。

• 动态组件：在使用动态组件时，通过指定名称，可以根据不同的条件动态地渲染不同的组件。

• 单文件组件命名：在单文件组件中，指定组件名称可以使得组件在全局范围内具有唯一性，避免命名冲突。

• 递归组件优化：在递归组件中，通过给组件指定名称，可以使得Vue在进行更新时更加高效，避免不必要的重新渲染。

以下是一个简单的示例，演示了如何在Vue组件中使用name选项：

<template>
  <div>
    <recursive-component :data="treeData" />
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent',
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

在上述示例中，通过使用name选项将组件命名为RecursiveComponent，我们可以清楚地知道这个组件的作用，并且能够在开发者工具中更好地跟踪和调试该组件。

总的来说，使用name选项可以帮助我们更好地管理和识别组件，提高代码的可读性和可维护性，以及在特定的场景下实现更灵活的组件逻辑。

三十三、vue常用的修饰符有哪些，它们分别有什么应用场景？

在Vue.js中，修饰符是用来扩展指令的功能的。Vue常用的修饰符包括以下几种：

• .prevent修饰符：阻止默认事件行为。例如，使用@click.prevent可以阻止点击事件的默认行为。

• .stop修饰符：阻止事件冒泡。例如，使用@click.stop可以阻止点击事件向父元素传播。

• .capture修饰符：添加事件监听器时使用事件捕获模式而非冒泡模式。通常情况下，事件是先在内部元素上触发，然后才向外层元素传播。使用.capture修饰符可以改变这个顺序，先触发外层元素上的事件再触发内部元素上的事件。

• .self修饰符：只当事件在该元素本身被触发时触发事件回调，而不是子元素触发事件时也触发回调。

• .once修饰符：只触发一次事件处理函数，之后移除事件监听器。例如，使用@click.once可以确保点击事件只会触发一次。

• .passive修饰符：告诉浏览器该事件监听器不会调用preventDefault()，从而可以提高性能。适用于滚动、触摸等需要频繁触发的事件。

这些修饰符可以通过在Vue指令后面添加.来使用，例如@click.prevent。它们可以根据具体的需求来灵活地扩展指令的功能，增加交互效果和逻辑控制。

需要注意的是，修饰符的顺序是可以组合使用的，例如@click.stop.prevent可以同时阻止事件冒泡和默认行为。

总之，修饰符是Vue中非常有用的功能扩展机制，能够帮助我们更好地处理事件和交互逻辑。具体在实际开发中，根据具体需求选择合适的修饰符可以提高代码的可读性和可维护性。

三十四、vue中异步组件的作用及原理

在Vue.js中，异步组件的作用是延迟加载组件，从而提高应用的性能和加载速度。异步组件的原理是利用Webpack的代码分割功能，将组件代码分割成独立的代码块，在需要时再进行动态加载。这样可以减少初始加载时需要下载的代码量，加快页面的加载速度。

异步组件的作用和优势包括：

减少初始加载时间：将一些不常用的组件或页面内容进行延迟加载，可以减少初始加载时需要下载的代码量，加快页面渲染速度，提高用户体验。

按需加载：根据实际需要动态加载组件，避免一次性加载大量组件导致页面加载速度过慢。特别是对于大型单页应用来说，这一点尤为重要。

优化性能：异步组件的加载可以帮助优化性能，使得应用更加高效。

异步组件的原理是基于Webpack的动态导入（dynamic import）功能实现的，通常通过使用import()语法来实现异步组件的加载。在Vue中，可以使用工厂函数返回一个Promise对象来声明异步组件，例如：

Vue.component('async-component', () => import('./AsyncComponent.vue'));

上述代码中，import(‘./AsyncComponent.vue’)返回一个Promise对象，当需要加载async-component组件时，Vue会自动触发该Promise并动态加载组件。

总的来说，异步组件能够帮助优化应用的加载速度和性能，特别适用于大型复杂的单页应用。通过合理地使用异步组件，可以提高用户体验，降低应用的初始加载时间，并提升整体性能。

三十五、vue中 nextTick 是什么？

Vue.js中，nextTick是一个Vue实例的方法，用于在下次DOM更新循环结束之后执行延迟回调。它的主要作用是在进行DOM操作后，等待Vue实例对数据进行异步更新后再执行某个回调函数。

nextTick方法可以用于以下情况：

在修改数据后立即访问DOM：当我们修改了Vue实例的数据，并希望立即访问更新后的DOM时，可能会出现DOM还未更新的情况。这时就可以使用nextTick方法来确保在DOM更新后执行回调，以获取到最新的DOM。

在Vue组件更新后执行某些操作：当我们需要在Vue组件更新后执行一些操作，例如获取某个元素的属性或计算DOM的尺寸等，也可以使用nextTick方法来确保在更新后执行回调。

下面是一个示例，演示了如何使用nextTick方法：

new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  mounted() {
    this.message = 'Updated Message'
    this.$nextTick(() => {
      // DOM已经更新
      console.log(this.$el.textContent) // 输出：Updated Message
    })
  }
})

在上述示例中，当Vue实例的message数据发生变化后，我们通过$nextTick方法来确保在DOM更新后执行回调函数。这样就能够在控制台输出更新后的DOM内容。

总之，nextTick方法是Vue提供的一个用于延迟执行回调函数的工具，可以确保在下次DOM更新循环结束后再执行。它在处理一些特定场景下非常有用，例如在修改数据后立即访问DOM或在组件更新后执行某些操作。

三十六、keep-alive

在Vue.js中，是一个抽象组件，用于缓存动态组件。它可以将动态组件包裹起来，并在组件切换时保留这些组件的状态，避免多次销毁和重新创建组件。这样可以提高应用性能，减少不必要的重复渲染和数据请求。

主要作用包括：

• 缓存组件状态：当一个被<keep-alive>包裹的动态组件切换时，它的状态会被保留，而不会被销毁。这样可以避免每次切换时都重新创建组件，提高页面加载速度和用户体验。

• 节省性能：通过缓存组件状态，可以避免不必要的DOM操作、数据请求等，减少性能消耗，特别是在频繁切换同一组件时能够明显提升性能。

使用<keep-alive>非常简单，在需要缓存的动态组件外部包裹<keep-alive>标签即可。例如：

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

上述示例中，<component :is="currentComponent"></component>会根据currentComponent的值动态渲染不同的组件，并且这些组件的状态会被<keep-alive>缓存起来。

需要注意的是，被<keep-alive>包裹的组件会经历特定的生命周期钩子，如activated和deactivated，可以在这些钩子中执行额外的逻辑操作。

总之，<keep-alive>是Vue提供的用于缓存动态组件的组件，能够有效提升应用性能，避免不必要的重复渲染和数据请求，特别适用于那些需要频繁切换的组件场景。

三十七、自定义指令

在 Vue.js 中，自定义指令（Custom Directives）允许开发者直接操作 DOM。通过自定义指令，我们可以封装常见的 DOM 操作和行为，使得这些操作可以在 Vue 实例的模板中直接使用。自定义指令的主要作用是在DOM元素上附加行为。

自定义指令可以用于处理以下情况：

DOM 事件监听
DOM 属性操作
样式操作
其他需要直接操作 DOM 的场景
自定义指令可以全局注册，也可以局部注册到一个组件中。一个自定义指令对象可以包含多个钩子函数，这些钩子函数用于定义指令的行为。常见的钩子函数包括：

• bind：只调用一次，指令第一次绑定到元素时调用。
• inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
• update：当被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
• componentUpdated：当被绑定元素所在模板完成一次更新周期时调用。
• unbind：只调用一次，指令与元素解绑时调用。

下面是一个简单的自定义指令的例子，实现鼠标悬停在元素上时改变背景颜色的效果：

// 全局注册自定义指令
Vue.directive('bg-color-on-hover', {
  bind(el, binding) {
    el.addEventListener('mouseenter', function() {
      this.style.backgroundColor = binding.value;
    });
    el.addEventListener('mouseleave', function() {
      this.style.backgroundColor = '';
    });
  }
});

在上面的例子中，我们创建了一个名为 bg-color-on-hover 的自定义指令，并在 bind 钩子函数中实现了鼠标悬停时改变背景颜色的逻辑。

在模板中使用该自定义指令：

<template>
  <div v-bg-color-on-hover="'lightblue'">Hover me to change background color</div>
</template>

通过以上例子，我们可以看到自定义指令的作用是直接操作 DOM 元素，从而实现特定的行为效果。这种方式使得我们可以封装和复用通用的 DOM 操作逻辑，使得代码更加清晰和可维护。

三十八、vue 中使用了哪些设计模式

Vue.js 的设计中融入了多种设计模式，下面列举了一些常见的设计模式在 Vue.js 中的应用：

• MVVM（Model-View-ViewModel）：Vue.js 是基于 MVVM 设计模式构建的框架。它将视图和数据模型分离，并通过 ViewModel 进行双向绑定，实现数据的自动更新。开发者只需要关注数据的变化，而无需手动操作 DOM。

• 观察者模式（Observer Pattern）：Vue.js 中使用了观察者模式来实现数据的响应式。Vue 使用 Object.defineProperty 或 Proxy 来劫持数据对象，当数据发生变化时，会通知相关的观察者进行更新。这样，当数据发生变化时，与之相关的组件或视图会自动更新。

• 组合模式（Composite Pattern）：Vue.js 中的组件系统采用了组合模式的思想。组件可以嵌套组合，形成复杂的组件树结构。每个组件都可以拥有自己的状态和行为，通过 props 和事件进行交互。这种模式使得代码的组织更加灵活和可复用。

• 策略模式（Strategy Pattern）：在 Vue.js 中，计算属性（computed）和监听器（watch）使用了策略模式。计算属性通过定义 getter 函数来计算属性的值，使得属性的值可以根据依赖自动更新。监听器通过定义回调函数来响应数据的变化，使得可以在数据变化时执行相应的操作。

• 发布-订阅模式（Publish-Subscribe Pattern）：Vue.js 中使用了发布-订阅模式来实现事件的管理和通信。通过 $on 方法订阅事件，通过 $emit 方法发布事件，并且可以传递参数。这种模式使得组件之间可以进行解耦，实现灵活的通信机制。

这些设计模式的应用使得 Vue.js 框架更加灵活、可扩展和易于维护。同时，理解这些设计模式也有助于开发者更好地理解 Vue.js 的内部工作原理，并编写高质量的 Vue.js 应用程序。需要注意的是，以上列举的设计模式并不是 Vue.js 中全部的设计模式，还有其他的设计模式在 Vue.js 的实现中也有应用。

三十九、vue中性能优化有哪些

在 Vue.js 中，可以采取一系列措施来优化性能，提升程序的运行效率和用户体验。以下是一些常见的 Vue.js 性能优化方法：

• 合理使用 v-if 和 v-show：v-if 适用于条件渲染，当条件不满足时会销毁或重新创建元素，而 v-show 则只是简单地切换元素的显示与隐藏。根据具体场景选择合适的指令可以减少不必要的 DOM 操作。

• 合理使用 computed 属性：computed 属性是基于它的依赖进行缓存的，只有在依赖发生改变时才会重新计算。因此，将一些复杂的计算逻辑放在 computed 属性中可以避免不必要的计算，提升性能。

• 合理使用 watch：watch 监听数据的变化并执行相应的操作，但过度使用 watch 会导致性能问题。因此，需要谨慎使用 watch，避免监听过多的数据，特别是监听复杂对象或数组。

• 合理使用 v-for：在使用 v-for 进行列表渲染时，尽量避免在模板中使用复杂的表达式或方法，以减少每次渲染时的计算量。

• 使用 key 属性管理列表项：在使用 v-for 渲染列表时，给每个列表项添加唯一的 key 属性可以帮助 Vue 更高效地更新 DOM，减少不必要的 DOM 操作。

• 异步组件和懒加载：通过异步组件和路由懒加载可以延迟加载部分组件，提高页面初始化速度。

• 打包优化：合理配置 Webpack，利用代码分割、按需加载等功能，减小打包后的文件大小，提升页面加载速度。

• 使用服务端渲染（SSR）：对于需要 SEO 优化或有较高首屏加载性能要求的应用，可以考虑使用服务端渲染，提高页面加载速度和搜索引擎收录效果。

• 避免不必要的数据响应：在设计数据结构时，避免过度嵌套数据结构，减少不必要的数据响应，提高性能。

以上是一些常见的 Vue.js 性能优化方法，开发者可以根据具体项目需求和场景选择合适的优化策略，从而提升应用程序的性能表现。

四十、单页面应用首屏加载速度慢怎么解决

单页面应用（SPA）首屏加载速度慢可能受到多方面因素的影响，包括大量资源加载、组件复杂度、数据请求等。以下是一些解决单页面应用首屏加载速度慢的方法：

代码分割：通过代码分割技术，将应用拆分为多个模块或按需加载组件，减少首次加载时需要下载的代码量，提高加载速度。可以使用Webpack等工具进行代码分割。

优化图片：对页面中的图片进行优化，包括压缩图片大小、使用适当的图片格式、懒加载图片等，以减少图片对加载速度的影响。

懒加载组件：对于不是首屏必须展示的组件，可以采用懒加载（异步加载）的方式，延迟加载这些组件，减少首屏加载时间。

Vue路由懒加载：在Vue中，可以使用路由懒加载来实现按需加载路由对应的组件，可以有效减少首屏加载所需的组件数量，提高加载速度。

减少HTTP请求：尽量减少页面需要发送的HTTP请求，可以合并请求、使用CDN加速等方式来减少网络请求次数，提高加载速度。

服务端渲染（SSR）：考虑使用Vue的服务端渲染（SSR），将一部分页面在服务端渲染好后再返回给客户端，可以加快首屏加载速度。

缓存数据：对于一些静态数据或不经常变化的数据，可以在本地缓存或使用浏览器缓存，减少数据请求次数。

性能优化工具：使用性能优化工具分析网页性能，如Chrome开发者工具、Lighthouse等，找出性能瓶颈并进行相应的优化。

综上所述，通过代码分割、图片优化、懒加载组件等方式，结合合理的数据请求策略和性能优化工具，可以有效解决单页面应用首屏加载速度慢的问题，提升用户体验。

四十一、vue项目中 怎么解决跨域问题

在Vue项目中解决跨域问题通常涉及到后端API请求跨域的情况。以下是一些常见的解决跨域问题的方法：

• 使用代理：在Vue项目的vue.config.js文件中配置代理，将API请求代理到后端服务器，从而避免跨域问题。示例代码如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server-api.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上述配置将以/api开头的请求代理到http://backend-server-api.com，并且设置changeOrigin: true来处理跨域。

• 后端设置CORS（跨域资源共享）：如果有权限修改后端接口，可以在后端接口中设置相应的CORS头部来允许前端跨域请求。具体方法取决于后端框架或语言，一般通过设置Access-Control-Allow-Origin等头部信息来实现。

• JSONP跨域请求：对于不支持跨域请求的接口，可以使用JSONP来进行跨域请求。但需要注意的是，JSONP只支持GET请求，并且需要后端接口的支持。

• 使用WebSocket：在某些情况下，可以考虑使用WebSocket来与后端进行实时双向通信，WebSocket不受同源策略的限制。

• 跨域资源访问控制：在一些特殊情况下，可能需要对浏览器的跨域策略进行相应的调整，例如使用document.domain来实现基于子域名的跨域访问。

总的来说，通常情况下通过代理、CORS设置或者其他特定的跨域请求技术可以解决Vue项目中的跨域问题。选择合适的方法取决于具体的场景和后端接口的要求。

四十二、vue项目中封装axios，主要封装哪些方面？

在 Vue 项目中封装 Axios 可以帮助统一管理 HTTP 请求，简化代码结构，并提供更好的可维护性和扩展性。主要封装 Axios 时，可以考虑以下几个方面：

• 创建实例：首先，可以创建一个 Axios 实例，配置基础的 URL、请求头、超时时间等信息，以便在整个应用中统一使用。

• 请求拦截器：通过请求拦截器可以在发送请求之前对请求进行处理，例如添加 token、设置请求头等操作。这里可以统一处理请求参数、请求头等内容。

• 响应拦截器：利用响应拦截器可以统一处理接口返回的数据，例如对返回的数据进行统一格式化、错误处理、权限校验等操作。

• 错误处理：在封装 Axios 时，应该考虑全局错误处理机制，捕获请求过程中可能出现的异常或错误，统一处理并给出友好的提示或日志输出。

• 封装请求方法：根据项目需求，可以封装常用的请求方法，如 get、post、put、delete 等，简化调用方式，提高代码复用性。

• 处理接口统一错误码：定义接口统一的错误码和错误信息，方便前端对不同错误进行统一处理。

• 处理请求取消：在组件销毁等情况下，需要取消正在进行的请求，避免出现请求重复发送或页面已销毁但请求仍在执行的情况。

• 集中管理接口：将所有接口集中管理，可以统一管理接口地址、参数、请求方式等信息，方便维护和修改。

通过以上封装，可以使项目中的 HTTP 请求更加规范、易于管理，提高开发效率和代码质量。当然，在实际项目中，根据具体需求可以进一步扩展和优化 Axios 封装，确保项目的稳定性和可维护性。

四十三、vue 要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?

• 1.1 常见权限控制
  登录鉴权:用户登录后返回 Token，前端将Token 保存到本地，作为用户登录的凭证，每次发送请求时会携带 Token，后端会对 Token 进行验证。当页面刷新时我们可以使用 Token 来获得用户权限。
• 访问权限:根据用户是否登录判断能否访问某个页面，通过路由守卫实现判断用户是否有此权限。
• 页面权限:前端配置的路由分为两部分“通用路由配置“和“需要权限的路由配置”。在权限路由中增加访问权限 meta(备注)。用户登录后可得到对应的权限列表，通过权限列表筛查出对应符合的路由信息，最后通过 addRoutes 方法，动态添加路由。
• 按钮权限:按钮权限一般采用自定义指令实现，当用户登录时后端会返回对应的按钮权限，在按钮上使用此指令，指令内部会判断用户是否有此按钮权限，如果没有则会移除按钮。

四十四、vue-router有几种钩子函数，具体是什么以及执行流程是怎么样的？

Vue Router提供了多种钩子函数，用于在路由导航过程中执行特定的操作。这些钩子函数包括全局前置守卫、路由独享的守卫、组件内的守卫等。下面是Vue Router中常用的钩子函数及其执行流程：

• 全局前置守卫：

beforeEach(to, from, next)：在路由切换之前执行，可以用于进行全局的导航守卫逻辑。接收三个参数：to（即将进入的路由对象）、from（当前导航正要离开的路由对象）、next（调用该方法后，路由才会继续执行）。
执行流程：当进行路由切换时，会按照注册的顺序依次调用全局前置守卫的beforeEach函数。如果在某个beforeEach中调用了next方法，会进入下一个beforeEach，直到全部beforeEach执行完毕或者某个beforeEach中调用了next(false)。

• 路由独享的守卫：

beforeEnter(to, from, next)：在单个路由配置中定义，用于对该路由进行独立的导航守卫逻辑。
执行流程：在路由匹配时，会依次执行该路由配置中定义的beforeEnter函数，然后再继续执行全局前置守卫中的beforeEach函数。

• 组件内的守卫：

beforeRouteEnter(to, from, next)：在路由进入该组件前调用，在这个守卫中无法直接访问this，因为组件实例还未创建。可以通过接收next回调函数，在组件创建之后执行一些逻辑。
beforeRouteUpdate(to, from, next)：在当前路由改变，但是该组件被复用时调用，例如从 /user/1 导航到 /user/2。
beforeRouteLeave(to, from, next)：在导航离开该组件的对应路由时调用，可以用来询问是否离开页面、保存未提交的表单等操作。
执行流程：在路由导航过程中，当涉及到组件的路由守卫时，会按照守卫函数的定义顺序依次执行，并且需要注意在beforeRouteEnter中使用next回调来确保组件实例已经创建。

四十五、Vue Router 的路由模式

Vue Router 提供了两种主要的路由模式，它们分别是 hash 模式 和 history 模式。这两种模式在路由的实现方式和 URL 的呈现上有一些区别：

Hash 模式：

• 在 hash 模式下，URL 中的路径会以 # 符号开始，例如：http://www.example.com/#/about。
• hash 模式不会触发浏览器向服务器发送请求，因此不会影响到服务器端，所有的路由都由前端来控制。
• hash 模式在旧版浏览器中具有较好的兼容性，因为 hash 的改变不会导致页面的刷新。

History 模式：

• 在 history 模式下，URL 的路径看起来更加正常，不再以 # 开头，例如：http://www.example.com/about。
• history 模式通过 HTML5 的 History API 实现，可以使用 history.pushState 来改变 URL 而不刷新页面。
• 这种模式更加符合传统的 URL 结构，但需要服务器端进行相关配置，以便在用户直接访问具体路由时能够正确地响应。

主要区别在于 URL 的表现形式以及对浏览器历史记录的处理方式：

在 hash 模式下，路由信息全部存放在 URL 的 hash 中，不会触发页面的重新加载，而是通过监听 hashchange 事件来实现路由的切换。
在 history 模式下，可以通过 History API 来动态改变 URL 而不刷新页面，因此可以更加自然地呈现 URL，但需要服务器端进行相应的配置以避免直接访问特定路由时出现 404 错误。
选择使用哪种模式取决于项目的实际需求和对 SEO（搜索引擎优化）的要求。在大多数情况下，如果不需要考虑服务器端的配置和对 SEO 的要求，hash 模式可以是一个简单可行的选择；而如果需要更加友好的 URL 形式并且能够很好地支持浏览器的前进后退操作，那么 history 模式可能更适合。

四十六、vue 项目本地开发完成后部署到服务器后报 404 是什么原因呢?

history模式刷新时会像服务端发起请求，服务端无法响应到对应的资源，所以会出现404问题。

Vue 项目本地开发完成后部署到服务器上报错 404 通常是由以下几个可能原因引起的：

• 路由配置问题：在 Vue 项目中，如果在本地开发时使用了前端路由（如 Vue Router），而部署到服务器上后没有正确配置服务器的路由规则，就会导致页面访问时找不到对应的路由而出现 404 错误。确保在服务器上配置了正确的路由规则。

• 服务器配置问题：有时候，部署到服务器上的 Vue 项目需要特定的服务器配置才能正常运行，比如需要对 Vue Router 进行特定的配置、需要启用服务器重写规则等。检查服务器配置是否符合 Vue 项目的要求。

• 静态资源路径问题：在 Vue 项目中，如果在本地开发时引用的静态资源路径是相对路径，而部署到服务器上后相对路径发生了变化，就会导致找不到对应的静态资源而返回 404 错误。确保静态资源路径设置正确，可以考虑使用绝对路径或相对根路径的方式引用静态资源。

• 缓存问题：有时候浏览器可能会缓存旧的资源文件，导致加载错误的资源而返回 404 错误。可以尝试清除浏览器缓存或在链接后添加版本号来解决这个问题。

• Nginx 配置问题：如果你使用 Nginx 等服务作为服务器，可能需要在 Nginx 的配置文件中添加相应的配置，比如配置代理、重定向等，以确保 Vue 项目能够正确访问。

针对以上可能的原因，你可以逐一排查并进行调整，以解决部署到服务器后出现 404 错误的问题。如果问题仍然存在，建议查看服务器的日志信息，以获取更详细的错误信息帮助定位问题。

四十七、Vuex

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，可以用于管理应用中的所有组件的状态。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态只能按照一定的流程进行修改。

Vuex 主要包含以下核心概念：

• State（状态）：即应用的状态，保存数据的地方，可以理解为保存在 Vuex 中的数据源。

• Getters（获取器）：用于从 store 中的 state 中派生出一些状态，类似于计算属性，可以对 state 中的数据进行加工处理后输出。

• Mutations（突变）：唯一允许修改 store 中的状态的方法，通过提交 mutation 来修改数据，而且无法直接调用 mutation，只能通过提交 commit 的方式触发 mutation。

• Actions（动作）：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。通过 dispatch 触发 action。

• Modules（模块）：允许将 store 分割成模块，每个模块拥有自己的 state、getters、mutations、actions。

通过这些概念的结合使用，Vuex 可以帮助我们更好地组织和管理 Vue.js 应用中的状态，尤其适用于大型单页应用程序。通过集中式的状态管理，可以更好地跟踪状态的变化、统一管理数据流，使得应用的状态变化更加可控和可预测。

vuex缺点
Vuex 中store只有一份，复杂的数据需要依赖于模块。Vuex状态是一个树状结构，最终会将模块的状态挂载到根模块上。

• 模块和状态的名字冲突。
• 数据不够扁平化、调用的时候过长,
• 更改状态mutation和action的选取。
• 模块需要增加namespaced
• 对TS支持并不友好

四十八、如何监听vuex中的数据变化

在 Vuex 中监听数据变化通常需要使用 Vue.js 提供的计算属性 mapState 或者 Watcher 监听器来实现。下面是两种常见的方法：

方法一：使用 Watcher 盛放vuex中的数据变化
你可以通过在组件中使用 this.$store.watch 方法来监听 Vuex 中特定 state 的变化。例如：

export default {
  mounted() {
    this.unwatch = this.$store.watch(
      (state) => state.myModule.myData,
      (newValue, oldValue) => {
        console.log('myData changed:', newValue);
      }
    );
  },
  beforeDestroy() {
    this.unwatch(); // 在组件销毁前取消监听
  }
}

方法二：使用计算属性 mapState
另一种方法是使用计算属性 mapState，它会自动将 store 中的状态映射到组件的计算属性中，并且当状态发生变化时，计算属性会更新。例如：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      myData: state => state.myModule.myData
    })
  },
  watch: {
    myData(newValue, oldValue) {
      console.log('myData changed:', newValue);
    }
  }
}

在这个例子中，myData 就是从 Vuex 中映射到组件中的计算属性，当 myData 发生变化时，watch 监听器会触发。

无论是使用 Watcher 还是计算属性 mapState，都可以有效地监听 Vuex 中数据的变化，并在需要时做出相应的处理。选择哪种方式取决于你的具体需求和项目结构

四十九、页面刷新后vuex的数据丢失怎么解决？

当页面刷新后，Vuex 中的数据会丢失是因为 Vuex 存储的状态是在内存中，而不是持久化到本地存储中。为了解决这个问题，你可以考虑以下几种方法：

• 使用持久化插件：可以使用 Vuex 的持久化插件，比如 vuex-persistedstate，将 Vuex 的状态持久化到本地存储（如 localStorage 或 sessionStorage）中。这样在页面刷新后，可以从本地存储中恢复之前保存的状态。

• 在 beforeunload 事件中保存状态：在页面即将卸载前（例如用户关闭页面或刷新页面时），可以监听 beforeunload 事件，将 Vuex 的状态保存到本地存储中。这样可以在下次加载页面时再次读取并恢复状态。

• 在初始化应用时从本地存储中恢复状态：在应用初始化时，可以检查本地存储是否有之前保存的状态，如果有则将其读取并应用到 Vuex 中，从而恢复之前的状态。

• 结合后端存储：如果需要长期保存状态或与后端进行数据同步，可以将状态保存到后端数据库中，然后在页面加载时从后端获取状态。

这些方法中，使用持久化插件是比较常见和方便的方式，可以减少手动编写保存和读取状态的逻辑。但根据实际项目需求和复杂度，选择合适的方法来解决页面刷新后 Vuex 数据丢失的问题。

五十、mutation 和action 的区别

在 Vuex 中，mutation 和 action 都是用来管理状态的重要概念，但它们在功能和使用方式上有一些不同：

Mutation（变更）
作用：mutation 用于同步地变更 Vuex 的状态。每个 mutation 都有一个字符串类型的 type 和一个 handler 函数，在 handler 函数中进行实际的状态变更操作。

使用：通过提交(commit)一个 mutation 来变更状态，例如：store.commit(‘increment’)。mutation 必须是同步函数。

示例：

javascript
mutations: {
  increment(state) {
    state.count++;
  }
}

Action（动作）
作用：action 用于异步地操作数据，可以包含任意异步操作，例如请求后端 API、定时器、或者条件判断等。通常用于提交 mutation 来变更状态。

使用：通过分发(dispatch)一个 action 来触发异步操作，例如：store.dispatch(‘incrementAsync’)。action 可以返回一个 Promise，并且可以包含异步操作。

示例：

actions: {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  }
}

总结
当需要对状态进行同步变更时，应该使用 mutation。
当需要进行异步操作、或者根据条件触发不同的变更时，应该使用 action。
通常情况下，我们会先通过 action 触发异步操作，然后再在 action 中提交 mutation 来实际修改状态。这样能够保持代码的清晰性和可维护性，同时允许 Vuex 中的状态变更遵循一定的流程。

五十一、Vuex 的 module

Vuex 的 module 主要用于将 store 分割成模块化的结构，以便更好地组织和管理大型应用中的状态。使用 module 可以让我们把 store 分成多个小模块，并且每个模块都拥有自己的 state、mutations、actions 和 getters。

下面是一些情况下使用 Vuex 的 module 的典型场景：

大型应用：当应用变得越来越复杂时，单一的存储对象可能会变得难以管理。使用 module 可以将 store 分解为多个小模块，每个模块负责管理特定部分的状态，使得代码更易于维护和扩展。

团队协作：在团队协作开发大型应用时，不同的开发者可以专注于不同模块的开发和维护，通过使用 module 可以降低团队成员之间的协作成本。

功能模块化：当应用的功能可以被划分为不同的独立模块时，可以使用 module 将这些功能模块化，使代码结构更加清晰。

复用性：有些状态是可以在不同部分之间共享和复用的，在这种情况下，可以将这些可复用的状态封装为一个独立的 module，以便在需要的地方进行引用。

举例来说，一个电子商务应用可能会有商品模块、购物车模块、用户模块等，这些模块可以分别作为 Vuex 的一个 module，每个模块管理自己相关的状态和逻辑，从而使得整个应用的状态管理变得更加清晰和可维护。

总之，当应用变得复杂或者需要更好地组织和管理状态时，使用 Vuex 的 module 是非常有益的。
当你使用 Vuex 的 module 时，你需要在 Vuex store 中定义模块，并将这些模块组合在一起。以下是一个简单的示例，展示如何在 Vuex 中使用 module：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// 定义一个子模块A
const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
};

// 创建 Vuex store 实例
export default new Vuex.Store({
  modules: {
    a: moduleA // 将子模块A添加到store中
  }
});

在上面的示例中，我们定义了一个名为 moduleA 的子模块，该子模块包含了状态 (state)、变更函数 (mutations)、动作函数 (actions) 和获取器 (getters)。然后，我们在创建 Vuex store 实例时，通过 modules 选项将子模块 moduleA 添加到了 store 中。

在组件中使用模块中的状态、提交 mutation 或者分发 action 时，需要注意模块的命名空间。你可以通过以下方式在组件中访问模块中的状态或方法：

// 在组件中访问模块A的状态
this.$store.state.a.count;

// 提交模块A中的mutation
this.$store.commit('a/increment');

// 分发模块A中的action
this.$store.dispatch('a/incrementAsync');

// 获取模块A中的getter
this.$store.getters['a/doubleCount'];

通过以上方式，你可以很容易地在 Vuex 中使用 module 来组织和管理应用的状态。这样做不仅使代码更加清晰和可维护，而且可以更好地处理大型应用中的状态管理问题。希望这个示例对你有所帮助！

五十二、vue3中CompositionAPl 的优势是?

• 在 Vue2 中采用的是 OptionsAPI（选项式API）,用户提供的 data,props,methods,computed,watch 等属性 (用户编写复杂业务逻辑会出现反复横跳问题)

• Vue2 中所有的属性都是通过 this 访问，this 存在指向明确问题

• Vue2 中很多未使用方法或属性依旧会被打包，并且所有全局 API都在 Vue 对象上公开。CompositionAPI对 tree-shaking 更加友好，代码也更容易压缩。

• 组件逻辑共享问题， Vue2 采用 mixins 实现组件之间的逻辑共享; 但是会有数据来源不明确，命名冲突等问题。 Vue3 采用 CompositionAPl提取公共逻辑非常方便

• 简单的组件仍然可以采用 OptionsAP!进行编写，compositionAP! 在复杂的逻辑中有着明显的优势。

• 更灵活的逻辑组织方式：Composition API 不再依赖于选项对象的方式，而是使用函数的方式来组织逻辑。这样可以更灵活地组合和复用逻辑代码，使得代码更加清晰和易于维护。

• 更好的代码重用性：Composition API 提供了一些函数式的 API，如 ref、reactive 和 computed 等，这些 API 可以实现更好的代码重用性。你可以将相关的逻辑封装为一个自定义的函数，然后在多个组件中进行复用。

• 更直观的数据响应式：在 Composition API 中，使用 ref 和 reactive 函数可以创建响应式的数据。相比 Vue 2.x 中的 data 和 computed，Composition API 提供了更直观的方式来定义和使用响应式数据。

• 更好的 TypeScript 支持：Composition API 的设计更加利于 TypeScript 的类型推断和代码提示。通过使用 TypeScript，可以在开发过程中捕获更多的错误和 bug，提高代码的可靠性。

• 更好的组件复用：Composition API 中的逻辑可以被封装为自定义的 hook（类似于 React 中的 hook），这样可以更方便地在不同的组件中复用逻辑。

五十三、53.Vue3 有了解过吗?能说说跟 Vue2 的区别吗?

• Vue3.0 更注重模块上的拆分，在 2.0 中无法单独使用部分模块。需要引入完整的 Vueis(例如只想使用使用响应式部分，但是需要引入完整的 Vuejs)， Vue3 中的模块之间耦合度低，模块可以独立使用。 拆分模块
• Vue2 中很多方法挂载到了实例中导致没有使用也会被打包(还有很多组件也是一样)。通过构建工具Tree-shaking机制实现按需引入，减少用户打包后体积。 重写 API
• Vue3 允许自定义渲染器，扩展能力强。不会发生以前的事情，改写 Vue 源码改造渲染方式。 扩展更方便
• 在 Vue2 的时候使用 defineProperty 来进行数据的劫持,需要对属性进行重写添加 getter 及 setter 性能差。
• 当新增属性和删除属性时无法监控变化。需要通过 $ set、$delete 实现
• 数组不采用 defineProperty来进行劫持(浪费性能，对所有索引进行劫持会造成性能浪费)需要对数组单独进行处理
• Diff 算法也进行了重写。
• Vue3 模板编译优化，采用 PatchFlags 优化动态节点，采用 BlockTree 进行靶向更新等
• 相比Vue2来说Vue3新增了很多新的特性。

五十四、vue项目中的错误如何处理

在Vue项目中，处理错误是非常重要的，可以帮助我们更好地调试和维护应用程序。以下是一些处理错误的常见方法：

使用try-catch块：
在 JavaScript 中，可以使用 try-catch 块来捕获代码块中的异常，并进行相应的处理。在Vue项目中，可以在需要处理可能出现错误的地方使用 try-catch 块。

try {
  // 可能会出错的代码块
} catch (error) {
  // 处理错误逻辑
  console.error(error);
}

全局错误处理：
在Vue项目中，可以通过监听全局的错误事件来捕获未被捕获的异常，并进行统一的处理。可以在 Vue 实例上添加一个全局错误处理函数。

Vue.config.errorHandler = function (err, vm, info) {
  console.error('Error:', err, 'Vue instance:', vm, 'Info:', info);
};

使用Vue的错误边界（Error Boundary）：
Vue 2.5+ 提供了错误边界的功能，可以捕获子组件树的 JavaScript 错误并进行处理，防止整个应用崩溃。

<template>
  <div>
    <h1>App</h1>
    <ErrorBoundary>
      <ChildComponent />
    </ErrorBoundary>
  </div>
</template>


<script>
import ErrorBoundary from './ErrorBoundary.vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ErrorBoundary,
    ChildComponent
  }
};
</script>

使用第三方插件：

可以使用像 axios、vue-router、vuex 等第三方插件提供的错误处理机制来处理网络请求、路由跳转等过程中可能发生的错误。
日志记录：

在Vue项目中，可以使用日志记录工具（如console.log、console.error、`Vue Devtools等）来记录错误信息，有助于定位和调试问题。
合理的错误提示：

当应用程序出现错误时，应该向用户提供友好的错误提示，帮助用户了解发生了什么问题以及如何解决。
通过以上方法，我们可以在Vue项目中更好地处理错误，提高应用程序的稳定性和用户体验。

五十五、vue3的模板编译优化

在 Vue 3 中，模板编译的优化主要通过以下几个方面来实现：

静态树提升（Static Tree Hoisting）：

• Vue 3 的模板编译器能够识别并提升静态的节点，将其放到 render 函数之外。这样可以避免在每次渲染时重新创建静态节点，提高了渲染的性能。

行内模块缓存（Inline Template Cached）：

• 模板编译器会将静态的模板片段缓存起来以便复用，从而减少不必要的模板编译开销。

事件侦听器缓存（Event Listener Cache）：

• Vue 3 会对事件侦听器进行缓存，避免在每次渲染时都重新创建事件侦听器，提高了性能。

事件处理函数的内联缓存（Inline Handlers Caching）：

• Vue 3 会将事件处理函数内联缓存，避免在每次渲染时都重新创建事件处理函数。

静态提升的条件缩减（Static Conditional Reduction）：

• 模板编译器会尽可能地减少静态条件分支的影响，避免不必要的条件判断和计算。

缓存事件处理函数（Cached Event Handlers）：

• 在编译阶段会尽量将事件处理函数进行缓存，以减少不必要的函数创建开销。

以上优化策略主要是通过在编译阶段进行静态分析和优化，以减少在运行时的不必要计算和创建，从而提高应用程序的性能和效率。Vue 3 的模板编译器在编译阶段会进行一系列优化，以生成高效的渲染函数，从而提升整体的性能和用户体验。

五十六、vue3的新特性

Vue 3 带来了许多新特性和改进，以下是一些 Vue 3 的主要新特性：

Composition API：

• Composition API 是 Vue 3 中引入的新的 API 风格，允许开发者根据逻辑相关性组织代码。相比于 Options API，Composition API 更加灵活和易于组织复杂逻辑。

Teleport：

• Teleport 允许将组件的内容渲染到应用程序的任何位置，而不受父组件的限制。这在处理全局提示、对话框等场景时非常有用。

Fragments：

• Vue 3 引入了 Fragments，允许组件返回多个根节点而无需包裹在一个外层元素中。

Suspense：

• Suspense 是 Vue 3 中的一个新特性，用于处理异步组件的加载状态，可以在数据加载完成前展示 loading 界面，并处理加载失败的情况。

更快的渲染：

• Vue 3 引入了一些性能优化，如静态树提升、模板编译优化等，使得 Vue 3 在渲染性能上有所提升。

更好的 TypeScript 支持：

• Vue 3 对 TypeScript 的支持更加友好，提供了更好的类型推断和类型定义，帮助开发者更轻松地使用 TypeScript 开发 Vue 应用。

全局 API 的修改：

• Vue 3 中一些全局 API（如全局 mixin、过滤器）被移除或修改，使得全局状态管理更加清晰和可控。

更小的体积：

• Vue 3 的体积相比于 Vue 2 有所减小，同时也提供了更好的 Tree-shaking 支持，可以更好地优化打包体积。