关于VUE，面试官喜欢问的问题也就这些了

最近面试了一些实习生，突然发现，好像大家面试之前都不进行专项准备。 现在行情不景气，也不想为难别人，但是，好歹看看书吧！而且很多问题也是内有乾坤呀！

作为一个8年老前端，被人面试过，也面试过很多人。

关于技术喜欢问的一些问题都在这了。拿去看看吧，其实也没有那么难的！

1.Vue 中的插槽可以分为那几类，区别是什么：

默认插槽（Anonymous Slot）：

• 这是最简单的插槽类型，不需要指定名称。
• 在子组件的模板中使用<slot></slot>标签定义插槽的位置。
• 父组件可以在子组件的标签内部直接放置内容，这些内容会被渲染到默认插槽的位置。

具名插槽（Named Slot）：

• 允许子组件定义多个插槽，并为每个插槽指定一个名字。
• 在子组件的模板中使用 <slot name="插槽名称"></slot> 来定义具名插槽。 - 父组件通过 slot 属性或 v-slot 指令来指定内容应该渲染到哪个具名插槽中。

作用域插槽（Scoped Slot）：

• 是一种特殊的插槽，允许子组件向插槽传递数据，这些数据可以在父组件的插槽内容中使用。

• 子组件使用 <slot> 标签的 v-bind 属性来绑定要传递的数据。

• 父组件通过 v-slot 指令来接收这些数据，并在插槽内容中使用它们。

• 子组件中：在需要预留插槽的位置使用 <slot> 标签。通过 v-bind 将子组件的数据绑定到 <slot> 上，例如  <slot :user="user"></slot>。

• 父组件中在使用子组件时，使用 <template v-slot:default="slotProps"> 来定义插槽的内容。

• slotProps 是一个临时变量，它包含了从子组件传递过来的数据。

• 在插槽的内容中，你可以像使用普通数据一样使用 slotProps 中的数据。

2.设置scoped属性限制css样式作用于时，deep原理和scope的好处

• 在Vue中，当使用scoped属性来限制CSS样式的作用域时，有时需要穿透这个作用域来修改子组件的样式。这时可以使用deep（或::v-deep）来实现。
• deep的原理是在CSS选择器后面添加一个特殊的属性选择器，该选择器与Vue为scoped样式生成的唯一属性相对应。这样，即使子组件位于父组件的作用域内，也可以通过deep选择器来穿透作用域并应用样式。
• 具体来说，当使用scoped时，Vue会为组件的HTML元素添加一个唯一的属性，如data-v-xxx。而deep选择器会利用这个属性来选择子组件中的元素，并将样式应用到这些元素上。这样，就可以实现父组件对子组件样式的修改。
• 避免全局样式冲突：由于每个组件的样式都有其独特的作用域，因此可以避免不同组件之间的样式冲突。提高样式的可维护性：通过将样式限定在组件内部，可以更容易地理解和管理每个组件的视觉表现。组件样式的封装：scoped使得组件的样式更加独立，可以轻松地将组件在不同的项目中重用，而不必担心样式污染或冲突

3.Watch和Compute的区别

• 用途：Watch是一个用于监听数据变化的选项，可以观察一个特定的数据，并在数据发生变化时执行相应的操作。而Computed是一个用于计算衍生数据的选项，它依赖于其他数据，并根据这些数据进行计算，然后返回计算结果。

• 缓存：与Watch不同，Computed的计算结果会被缓存起来，只有当依赖的数据发生变化时，才会重新计算。这样可以避免不必要的计算，提高性能。

• 返回值：Computed中的函数必须用return返回最终的结果。

• 使用场景

  Watch更侧重于监听数据变化并执行相应的操作，而Computed则更侧重于根据已有数据计算出新的数据 Watch适用于需要在数据变化时执行异步或开销较大的操作，或者需要监听多个数据的变化并进行相应处理的情况。

  例如，假设有一个计算属性fullName，它由firstName和lastName两个数据属性组合而成。如果需要在fullName发生变化时发送一个网络请求，那么可以使用watch来监听fullName的变化，并在变化时执行网络请求的操作。此外，Watch还可以监听对象或数组的变化，当对象或数组的某个属性发生变化时，Watch也能够捕捉到这个变化并执行相应的操作。这在需要深度监听对象或数组的变化时非常有用。

  Computed适用于需要根据已有数据计算出新的数据的场景。例如，假设有一个购物车应用，需要计算购物车中商品的总价。可以使用computed来计算总价，它依赖于购物车中每个商品的价格和数量，并根据这些数据进行计算，返回总价。当购物车中的商品价格或数量发生变化时，computed会自动重新计算总价。

Vue的虚拟DOM（Virtual DOM）是一种编程概念，用于在内存中构建和操作一个轻量级的、虚拟的DOM树结构，而非直接操作实际的DOM。Vue通过使用虚拟DOM来优化DOM操作，提高渲染性能。

4.以下是关于Vue的虚拟DOM知道多少说多少：

• 抽象层：虚拟DOM是实际DOM的一个抽象层，它提供了一种更高级别的方式来描述和操作UI。开发者可以使用Vue的模板语法或渲染函数来创建虚拟节点（VNodes），这些节点组成了一个虚拟DOM树。
• 差异对比：当数据发生变化时，Vue会生成一个新的虚拟DOM树，并与旧的虚拟DOM树进行差异对比（diff算法）。这个过程中，Vue会找出两个树之间的差异，并生成一个差异列表。
• 最小化DOM操作：通过差异对比，Vue能够精确地知道哪些DOM节点需要更新、添加或移除。然后，Vue会将这些差异应用到实际的DOM上，以最小的DOM操作量来实现UI的更新。这种精确的操作避免了不必要的DOM重绘和重排，从而提高了性能。
• 跨平台：由于虚拟DOM是对实际DOM的抽象，它可以在不同的平台上实现。Vue的虚拟DOM不仅可以在浏览器中运行，还可以通过渲染器（如Vue Server Renderer）在服务器端渲染，或者使用其他渲染器（如NativeScript）在原生应用中渲染。

5.templat可以加v-if 或者v-show 吗

• 在Vue 3中，标签上可以使用v-if和v-show指令。

• <template>标签是一个占位符，它本身不会被渲染为DOM元素，但它可以包含多个子元素。通过在<template>上使用v-if或v-show，可以控制其包含的子元素的显示与隐藏。

• 使用v-if时，如果条件为真，则渲染<template>标签内的内容；如果条件为假，则不渲染。而使用v-show时，无论条件真假，都会渲染<template>标签内的内容，但会根据条件来切换其显示或隐藏状态。

• 需要注意的是，在Vue 2中，<template>标签上是不支持使用v-if和v-show的。但在Vue 3中，这个限制被解除了，因此可以在<template>上使用这些指令。

6.v-if和v-show的区别是什么（越详细越好不要只说显示隐藏这种）？

• 控制原理：v-if的控制原理是将整个dom树中的元素销毁或创建从而达到控制渲染的效果；而v-show的控制原理则是为需要处理的元素添加display:none进行隐藏或显示。

• 编译过程：v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show则简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。

• 生命周期：v-if有更高的切换消耗；v-show有更高的初始渲染消耗。当渲染条件为假时，v-if并不做操作，直到为真时才渲染。

• v-show由false变为true时，不会触发组件的生命周期。

• v-if由false变为true时，触发组件的beforeCreate、created、beforeMount、mounted钩子，由true变为false时，触发组件的beforeDestroy、destroyed。

7.Vuex有五个核心概念和作用

• state：Vuex的基本数据，用来存储需要变更的变量。
• getters：可以理解为store的计算属性，对state里面的变量进行过滤。
• mutations：用来修改提交store中的数据，每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler），这个回调函数就是实际进行状态修改的地方，且必须是同步操作。
• actions：action提交的是mutation，不能直接变更状态，但可以包含任意异步操作。
• modules：将vueX中的store进行模块化，使每个模块都拥有自己的state、mutation、action、getter。

8.Vuex的属性中哪些是同步，哪些是异步

• state、getters、mutations是同步的，而actions可以是异步的。modules本身并没有同步或异步的特性，它主要用于将store进行模块化。

• state：用于存储应用的状态数据，是同步的。

• getters：可以理解为store的计算属性，用于从state中派生出一些状态，比如过滤或计算，也是同步的。

• mutations：用于修改state中的数据，每个mutation都有一个字符串的事件类型和一个回调函数，这个回调函数用于实际的状态修改，且必须是同步操作。

• actions：类似于mutations，但是它提交的是mutation，而不是直接变更状态，并且actions可以包含任意异步操作。因此，actions是异步的。

• modules：用于将store进行模块化，每个模块拥有自己的state、mutation、action、getter。模块本身并没有同步或异步的特性，其同步或异步行为取决于其内部使用的mutations或actions

9.Vuex和localStorage的主要区别体是什么

• 作用范围与目的：Vuex主要用于管理应用程序的状态，其作用范围限定在应用程序内部。而localStorage是Web浏览器提供的接口，用于在浏览器中存储数据。

• 数据类型：Vuex可以存储任意类型的数据，而localStorage只能存储字符串类型的数据。当需要存储其他类型的数据，例如对象或数组时，需要使用JSON的stringify和parse方法进行转换。

• 数据大小：Vuex存储的数据大小受到内存大小的限制，而localStorage的存储数据大小一般限制在5MB左右。

• 数据共享与独立性：在Vuex中，数据是共享的，不同组件之间可以共享同一个数据状态。而在localStorage中，数据是独立的，不同页面或窗口之间不能共享同一个数据状态。

• 持久性：当刷新页面时，Vuex存储的值会丢失，而localStorage中的数据则不会受到影响，数据仍然保留。

• 应用场景：Vuex更适合用于组件之间的传值，方便组件间的通信和状态管理。而localStorage则主要用于页面之间的传值，例如在跨页面时保存和读取数据。

• 总结来说，Vuex和localStorage各有其特点和适用场景。Vuex更适合在应用程序内部进行状态管理，而localStorage则适用于在浏览器环境中持久化存储数据。

10.如何实现Vuex数据在刷新时不被清除的方法

• 第一种常见的方式是将Vuex的数据存储到浏览器的localStorage或sessionStorage中。当页面刷新时，可以从localStorage或sessionStorage中读取数据，并恢复到Vuex中。

  以下是使用localStorage实现Vuex数据持久化的基本步骤： 在Vuex的store中，监听mutations，当数据发生变化时，将最新的数据保存到localStorage中。这可以通过在mutations函数中添加保存数据的代码实现。 当页面刷新时，在Vuex的store初始化之前，从localStorage中读取数据，并将读取到的数据恢复到Vuex的state中。这可以在Vuex的store的初始化函数中实现。

• 第三方库，但也是存储到localStorage或sessionStorage中

  Vue-persistedstate， 在store文件夹下配置indexjs文件

11.Vue3 与 Vue2 相比有哪些主要变化？

• 双向数据绑定原理：Vue2的双向数据绑定是利用ES5的API Object.definePropert()对数据进行劫持，结合发布订阅模式的方式来实现。而Vue3则使用ES6的Proxy API进行数据代理。这样的改变带来了几个优势，包括可以直接监听整个对象而不仅仅是某个属性，可以省去for in、闭包等内容来提升效率，以及可以监听数组内部数据的变化。

• 性能：当数据量比较大时，Vue2的性能会有所减弱，而Vue3相比之下性能更好。

• Vue3对虚拟DOM进行了重写，引入了静态提升、事件监听缓存、块更新等优化策略，以提升渲染性能。

• 在Vue2中，每次数据变化都会导致整个虚拟DOM树的重新渲染，这在大型应用中可能会引发性能问题。而在Vue3中，只有发生变化的部分才会被重新渲染，这被称为“块更新”。这种更新方式显著提高了渲染效率。

• Vue3的虚拟DOM还引入了静态提升技术，即在编译阶段确定模板中的静态部分，并在渲染过程中跳过这些部分，从而减少了不必要的计算。

• Vue3还对事件监听进行了优化。在Vue2中，每次渲染都会重新绑定事件监听器，而在Vue3中，事件监听器会被缓存并在多次渲染之间共享，从而减少了事件监听器的绑定次数。

• 变更通知：在Vue2中，使用Vue.set来给对象新增一个属性时，这个对象的所有watcher都会重新运行；而在Vue3中，只有依赖的属性的watch才会重新运行。

• 项目结构和命令变化：Vue3的项目结构和启动命令也有所变化，例如移除了配置文件目录、config和build文件，新增了public文件夹，并且启动项目命令由npm run dev变成了npm run serve。

• 新特性和支持：Vue3新加入了TypeScript以及PWA支持，这使得Vue3更加易用且功能更强大。

更详细的👀

性能优化：Vue3 在性能上进行了大量的优化，包括使用 Proxy 对象替代 Vue2 中的 Object.defineProperty，使得响应式系统具有更高的性能和更好的兼容性。同时，Vue3 还重写了虚拟 DOM 的实现，优化了模板编译和组件初始化过程，使得更新性能提高了 1.3-2 倍，SSR 速度提高了 2-3 倍，并且体积减小了。

API 更改：Vue3 引入了一些新的 API 和功能，包括 Composition API、Teleport、Suspense、Fragment 等。同时，Vue3 也对一些现有的 API 进行了修改和优化，例如全局 API 的修改、指令系统的变化等。

架构设计：Vue3 在架构设计上也进行了一些调整，采用了更加模块化和可复用的设计思路。例如，Vue3 将响应式系统、模板引擎、组件系统等核心功能都进行了重构和优化，使得它们更加独立和可扩展。

TypeScript 支持：Vue3 是基于 TypeScript 编写的，因此具有更好的 TypeScript 支持。这使得开发者在编写 Vue3 应用时，可以享受到自动的类型定义提示和更好的类型安全性。

更易于维护和扩展：Vue3 的 Composition API 使得组件代码更加灵活和可复用，同时也更容易进行维护和扩展。此外，Vue3 还提供了更加完善的生态系统和工具链，例如 Vue CLI、Vite 等，使得开发者可以更加高效地进行开发和构建 Vue3 应用。

12.Vue2升级vue3的注意事项

• 浏览器兼容性：Vue3使用Proxy实现响应式，对IE11以下的版本存在兼容性问题。确保你的目标浏览器支持Vue3的要求。、

• API变更：Vue3对底层进行了大量重构，新增、废弃了很多API。需要熟悉Vue3的新API，并根据需要进行相应的修改。

• 模板指令变化：Vue3中，v-model指令的用法有所变化，传递的值和事件不同。同时，节点上的key用法也有所改变，用于跟踪节点身份。

• 依赖升级：升级Vue3时，需要同时升级相关的依赖，包括Vue Router、Vuex等。确保这些依赖的版本与Vue3兼容。

• 插件和第三方库：如果项目中使用了第三方插件或库，需要确保它们与Vue3兼容，并进行相应的升级。

• 代码调整和优化：由于Vue3的底层变更和性能优化，可能需要对现有代码进行调整和优化，以适应新的框架。

• 全面测试：升级完成后，进行全面的测试是必要的。包括单元测试、集成测试和端对端测试，确保升级后的应用程序在各种场景下都能正常工作。

13.Vue3 全局状态管理有哪些

• Vuex4：Vuex 是 Vue.js 的状态管理模式和库。Vuex 4 是 Vuex 的 Vue 3 版本，它提供了一种集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

• 提供/注入 (Provide/Inject)

Vue 3 引入了 provide 和 inject API，它们可以在祖先组件中“提供”状态，然后在任何后代组件中“注入”这些状态。

• Context API (实验性)

  Vue 3 提供了一个实验性的 getCurrentInstance API，它可以让你访问组件的当前实例。尽管这不是官方推荐的全局状态管理方案，但在某些情况下可能很有用。

注意：使用 getCurrentInstance 是实验性的，并且可能会在未来的版本中发生变化。因此，除非有特别的需求，否则不建议在生产环境中使用。

• 第三方库 如 pinia，它为 Vue3提供了一种新的状态管理解决方案，灵感来自 Vuex 但设计更简洁。

14.Vue3 的异步组件和懒加载是如何实现的

在 Vue3 中，异步组件和懒加载的实现方式有了一些变化。Vue3 引入了新的 API 和工具来支持这些功能。

• 异步组件

  Vue3 中，异步组件的声明方式发生了改变。Vue2 中，我们可以直接使用 () => import('./component.vue') 的方式来声明异步组件。但在 Vue3 中，我们需要使用 defineAsyncComponent 辅助函数来显式地声明异步组件。

  示例：

	import { defineAsyncComponent } from 'vue'
	const MyAsyncComponent = defineAsyncComponent(() =>
	import('./components/MyAsyncComponent.vue')
	)

• 路由懒加载

  在 Vue3 的路由系统中，实现懒加载的方式与 Vue2 类似，但也有一些变化。你可以使用动态导入 (import()) 语法结合 defineAsyncComponent 来实现路由的懒加载。

  示例：

	import { createRouter, createWebHistory } from 'vue-router'
	import { defineAsyncComponent } from 'vue'
	const router = createRouter({
	history: createWebHistory(),
	routes: [
	{
	path: '/my-component',
	name: 'MyComponent',
	component: defineAsyncComponent(() => import('./components/MyComponent.vue'))
	}
	]
	})
	export default router

在上面的示例中，MyComponent 组件会在路由被访问时才会被加载，实现了路由的懒加载。

• Vue Router 还提供了一个 import.meta.glob 方法，允许你动态地导入多个组件。这对于大型应用来说非常有用，可以进一步提高性能。

示例：

	const modules = import.meta.glob('./components/*.vue')
	const router = createRouter({
	history: createWebHistory(),
	routes: Object.keys(modules).map(path => ({
	path: /${path.replace(/^\.\/components\//, '').replace(/\.vue$/, '')},
	name: path.replace(/^./components//, '').replace(/.vue$/, ''),
	component: defineAsyncComponent(() => modules[path])
	}))
	})
	export default router

在这个示例中，import.meta.glob 会匹配 ./components/ 目录下的所有 .vue 文件，并为每个文件创建一个路由。这样，只有当路由被访问时，对应的组件才会被加载，实现了组件的懒加载。

15.Vue3 的路由系统有哪些新特性

• 创建方式的改变：在 Vue3 中，使用 createRouter 来创建 router 对象，而不是 Vue2 中的 new VueRouter()。这样可以更好地利用 Composition API，使得路由配置更加灵活和可维护。

• 路由模式的改变：Vue3 提供了两种路由模式，createWebHistory 和 createWebHashHistory。createWebHistory 路由模式路径不带 # 号，而 createWebHashHistory 路由模式路径带 # 号。这样可以根据项目的需求选择适合的路由模式。

• 动态路由和懒加载：Vue3 的路由系统支持动态导入和懒加载组件，这可以优化应用的性能，减少首屏加载时间。

• 路由守卫的改进：Vue3 的路由系统对路由守卫进行了改进，提供了更多的钩子函数，如 beforeEnter、beforeResolve 等。这些钩子函数可以在路由导航的不同阶段进行拦截和处理，增强了路由的灵活性和可控性。

• 自定义渲染器：Vue3 采用了拆包的方式，将响应式、编译和运行时全部独立出来。这意味着开发者可以根据需要自定义渲染器，实现更加灵活和高效的路由渲染。

• 路由元信息：Vue3 的路由系统支持路由元信息，可以在路由配置中定义一些额外的信息，如标题、权限等。这些信息可以在路由导航时进行访问和处理，为开发者提供了更多的灵活性和便利性。

16.Vue3 中的 Fragment是干嘛的？

• 是一个新的特性，它允许在组件的模板中返回多个根节点。在 Vue 2.x 版本中，由于模板编译器的限制，组件的模板只能有一个根节点。这导致在某些情况下，我们需要在模板的外层包裹一个无意义的元素，仅仅是为了满足这个限制。

• Fragment 的引入解决了这个问题，使得模板结构更加灵活。现在，我们可以在一个组件的模板中直接返回多个元素，而不需要将它们包裹在一个父元素内。这有助于减少不必要的 DOM 结构，使渲染更加高效。

• 在 Vue 3 中，使用 Fragment 非常简单。只需在模板中使用 <template> 标签包裹多个根节点即可。在编译阶段，这些多个子元素会被替换为父元素的直接子节点进行渲染。

-在处理大量根元素时可能会带来性能问题

• Vue3 中的 Fragment 特性解决了组件模板中只能有一个根节点的限制，提供了更加灵活的模板结构，并有助于减少不必要的 DOM 结构，提高渲染效率。

17.Vue3 中的 Suspense 组件有什么作用，以及使用它时的问题有哪些？

• Vue3 中的 Suspense 组件是一种用于处理异步组件和延迟加载的机制，它允许在等待异步操作完成时显示一些占位内容，以提供更好的用户体验。

• 在传统的 Vue 2 中，处理异步组件和延迟加载通常需要使用一些复杂的技巧，如使用动态组件、配合第三方库等。然而，这些方法在代码和逻辑上可能比较繁琐。Vue 3 的 Suspense 机制提供了一种更简洁和直观的方式来处理异步组件和延迟加载。

• Suspense 组件的主要作用是在异步组件加载完成前显示一个占位符，以提高用户体验。它允许我们协调整个应用程序的加载状态，包括所有深度嵌套的组件。使用 Suspense，我们可以创建一个单一的、有组织的系统，一次性加载所有内容，而不是像爆米花用户界面一样，到处都是 loading，组件突然加载完成。

• 在使用 Suspense 组件时，需要注意以下几点：

问题！！！！！

• Suspense 组件只能包含一个异步组件，否则会抛出错误。
• fallback 插槽中的内容只能是一个单独的元素，否则会抛出错误。
• 异步组件必须通过 defineAsyncComponent 方法定义，否则无法使用 Suspense 组件。

18.Vue3 中的 Teleport 是什么，它有什么用途

• Vue3 中的 Teleport 是一种新的内置组件，它允许开发者将组件的内容渲染到 DOM 树中的任何位置，而不仅仅是其父级元素。这在处理一些特殊场景，如模态对话框组件、全局提示、弹出框、通知栏等时非常有用，因为这些组件通常需要挂载到 DOM 结构中的其他位置。

• 使用 Teleport 可以轻松实现在组件内部定义的内容在 DOM 树的其他位置动态渲染，而不受组件嵌套的限制。它通过将组件内容“传送”到 DOM 中的指定位置，解决了组件间 CSS 层级和定位的问题。这种灵活性对于日常 Web 开发非常有价值，特别是在处理复杂的用户界面时。

  总的来说，Vue3 中的 Teleport 提供了一种更加灵活和方便的组件渲染方式，使得开发者能够更加灵活地组织和渲染组件，提高用户体验和易用性。

19.Vue3 的 Composition API 是如何工作的，它解决了什么问题

Vue3 的 Composition API 是一种新的 API 风格，旨在更好地组织和重用组件逻辑。相比于 Vue 2 的 Options API，Composition API 更加灵活和可组合，使得组件的逻辑更加清晰和易于维护。

• Composition API 的主要部分是 setup 函数，该函数在组件创建之前执行，并返回一个包含组件逻辑的对象。这个对象可以包含数据、方法、计算属性等，并且可以在模板中直接使用。

• Composition API 解决了以下几个问题：

  逻辑复用：在 Options API 中，组件的逻辑是分散在多个选项中的，例如 data、methods、computed 等。这导致了逻辑之间的耦合度较高，难以进行复用和共享。而 Composition API 将组件的逻辑集中在一个 setup 函数中，可以更加方便地进行复用和共享。

  逻辑组织：在 Options API 中，随着组件逻辑的复杂性增加，选项之间的划分和组织变得越来越困难。而 Composition API 允许开发者使用函数的方式组织组件逻辑，将相关的代码放在一起，使得代码更加清晰、可读性更高。

  生命周期管理：在 Options API 中，生命周期钩子是分散在各个选项中的，这导致了生命周期管理的混乱和不便。而 Composition API 提供了一套完整的生命周期钩子函数，例如 onMounted、onUpdated 等，使得生命周期管理更加统一和方便。

20.Vue3 的响应式系统是如何实现的与 Vue2 相比有哪些改进

• 基于Proxy的实现：Vue2 使用 Object.defineProperty 对对象的属性进行劫持，实现响应式。但这种方式有一些限制，例如只能劫持对象的属性，不能劫持整个对象，也无法监听数组的变化等。而 Vue3 使用 Proxy 对象对整个对象进行劫持，不仅可以监听对象属性的变化，还可以监听对象本身的变化，以及数组的变化，从而解决了 Vue2 中的一些问题。

• 更高效的性能：由于 Proxy 对象是基于 ES6 的规范实现的，因此具有更高的性能。在 Vue3 中，响应式系统的实现更加简洁和高效，减少了不必要的计算和内存开销，从而提高了应用的性能。

• 更好的兼容性：Proxy 对象是 ES6 中新增的特性，因此在一些老版本的浏览器中可能不被支持。但 Vue3 在实现响应式系统时，对 Proxy 对象的使用进行了兼容性处理，使得 Vue3 可以在更多的浏览器中运行。

• 更易于理解和维护：Vue3 的响应式系统实现更加简洁和直观，使得开发者更容易理解和维护代码。同时，Vue3 还提供了丰富的 API 和工具，例如 reactive、ref、computed 等，使得开发者可以更加方便地实现响应式数据的管理和操作。

21.Vue3 引入了哪些新的 API 和功能？

• Composition API：这是一个全新的 API 风格，可以更好地组织和重用组件逻辑。相比于 Vue 2 的 Options API，Composition API 更加灵活和可组合，使得组件的逻辑更加清晰和易于维护。

• Teleport：这是一个新的组件，可以帮助我们更方便地在 DOM 中的任意位置渲染组件。Teleport 可以将组件的内容渲染到指定的目标位置，而不受组件层级的限制，这在处理模态框、弹出菜单等场景非常有用。

• Suspense：这是一个新的组件，可以更好地处理异步组件的加载和错误处理。通过使用 Suspense 组件，我们可以在异步组件加载时显示一个占位符，当异步组件加载完成后再显示真正的内容，同时还可以处理异步组件加载失败的情况。

• Fragments：在 Vue 2 中，每个组件必须有一个根元素。但在 Vue 3 中，这个限制被放宽了，组件可以返回多个根节点，这被称为 Fragments。

• 新的指令和修饰符：Vue 3 也引入了一些新的指令和修饰符，例如 v-memo 指令用于优化列表渲染的性能，v-model:modelValue 修饰符用于自定义表单输入元素的值。

• 更好的TypeScript支持：Vue 3 是基于 TypeScript 编写的，因此具有更好的 TypeScript 支持。这使得开发者在编写 Vue 3 应用时，可以享受到自动的类型定义提示和更好的类型安全性。

22.Vue 3 生命周期

引入了 Composition API，它提供了一种新的方式来组织和共享代码逻辑，使得生命周期钩子和其他选项可以被更好地封装和重用。以下是 Vue 3 中组件的主要生命周期钩子：

• setup()

  这是 Vue 3 中新引入的生命周期函数，发生在组件创建之前。它返回一个对象，该对象上的属性和方法将在组件实例上被注册。

  它是 Composition API 的入口点，允许你使用 reactive、ref、computed 等函数来定义响应式数据和方法。

  在 setup() 中，你可以访问 props 和 context，但不能直接访问 this。

• onBeforeMount()

  在组件即将挂载到 DOM 之前调用。此时，模板或渲染函数已经被编译，但尚未渲染为实际的 DOM 元素。

• onMounted()

  在组件已经挂载到 DOM 上之后调用。此时，组件已经生成了对应的 DOM 元素，并且可以通过 this.$el 访问。

• onBeforeUpdate()

  在组件的响应式数据更新，但尚未重新渲染之前调用。此时，你可以在这个钩子中执行一些在更新前的准备工作。

• onUpdated()

  在组件的响应式数据更新并且重新渲染之后调用。此时，DOM 已经更新，你可以执行一些依赖于更新后 DOM 的操作。

• onBeforeUnmount()

  在组件即将从 DOM 中卸载之前调用。你可以在这个钩子中执行一些清理工作，如取消定时器、移除事件监听器等。

• onUnmounted() 在组件已经从 DOM 中卸载后调用。此时，所有的事件监听器和子组件都被清理完毕。

23.如何优化 Vue3 的性能

• 减少不必要的渲染

  使用 v-if 和 v-show 指令来根据条件渲染元素。v-if 是“真实”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 就简单得多——不论初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

  使用 computed 属性来缓存计算结果，避免在模板中重复计算。

  避免在 v-for 列表中使用复杂的表达式或方法

• 优化数据结构和组件结构**：

  使用扁平化的数据结构，避免嵌套过深的组件或数据。

  拆分大型组件为小型、可复用的子组件。

  使用 keep-alive 来缓存不经常变化的组件，减少不必要的渲染。

• 合理使用Vue的响应式系统：

  避免在 setup 函数或计算属性中使用大量的 reactive 或 ref，这可能会导致不必要的响应式依赖。

  使用 toRefs 来将响应式对象转换为普通对象，以避免不必要的响应式追踪。

• 使用异步组件和代码分割

  对于大型应用，可以考虑使用异步组件来按需加载组件，减少首屏加载时间。

  使用代码分割技术，将代码拆分为多个小的包，按需加载。

• 优化路由系统：

  使用动态路由和懒加载来优化路由性能。

  合理使用路由守卫，避免在守卫中进行过多的计算或异步操作。

• 使用性能工具进行监控和优化：

  使用 Vue Devtools 进行性能分析，找出性能瓶颈。

  使用浏览器的性能分析工具（如 Chrome DevTools）来监控和优化应用性能。

• 其他优化技巧**：

  避免使用内联函数或闭包作为事件处理函数，因为它们会导致不必要的渲染。

  使用 CSS 动画代替 JavaScript 动画，以提高性能。

  对图片进行压缩和优化，减少加载时间。

** 前端东西说多也多，说少也少，主要还是要搞清楚什么是核心，什么东西能表示你已经清楚的了解了这个知识点！！！！

今天先说到这里，有需要的兄弟拿走不谢！！！！！！

创作不易，且看且珍惜～～～**