面试题复盘

1. Vuex与本地存储的区别

Vuex是一个专门为Vue.js应用程序开发的状态管理模式和库。它提供了一个中央存储库，用于存储应用程序的所有组件之间共享的状态【组件间通信的一种方法，一般用于中大型应用】。Vuex的主要目的是在Vue.js应用程序中管理复杂的状态逻辑，确保数据流的一致性和可追溯性。

本地存储是指在用户的浏览器中存储数据的技术。常见的本地存储技术包括cookie、localStorage和sessionStorage。本地存储可以在浏览器关闭后保留数据，并且在应用程序重新加载时可用。

虽然Vuex和本地存储都可以在应用程序中存储数据，但它们之间有很大的区别。以下是它们之间的主要区别：

1. 用途不同：Vuex旨在管理Vue.js应用程序中的状态，而本地存储是用于在浏览器中存储数据的技术。

2. 存储范围不同：Vuex存储的状态在整个应用程序中共享，而本地存储只在当前浏览器中可用。

3. 存储方式不同：Vuex将数据存储在内存中，而本地存储将数据存储在浏览器中的硬盘或其他持久存储介质中。

4. 数据持久性不同：由于Vuex存储在内存中，因此在浏览器关闭时，其中的数据将被清除。而本地存储技术可以在浏览器关闭后保留数据，并在应用程序重新加载时可用。

综上所述，Vuex和本地存储是两种不同的技术，用于不同的目的。Vuex用于管理Vue.js应用程序中的状态，并提供了一种可靠的数据流管理方式。而本地存储则用于在浏览器中存储数据，使数据在应用程序关闭和重新加载时可用。

2. Vue2和Vue3的区别？以及为什么提倡vue3？

1. 性能提升：Vue.js 3.x经过了许多性能改进，例如编译器的升级【通过模板编译器生成的渲染函数代码的体积更小】、响应式系统的改进、虚拟DOM的优化等等，这些改进可以提高Vue.js 3.x的性能。

2. Composition API：Vue.js 3.x引入了Composition API，这是一个新的API风格，使组件中的逻辑可以更好地组织和复用。这个新的API风格使得组件逻辑可以更好地抽象和组合，解决了Vue.js 2.x在复杂组件中处理逻辑和状态时的一些限制。

3. 更小更快的代码：Vue.js 3.x移除了一些过时的API和功能，并通过重写响应式系统、编译器和虚拟DOM等核心模块，使得Vue.js 3.x的代码更小，性能更好。

4. 更好的TypeScript支持：Vue.js 3.x对TypeScript的支持更加友好，内置了TypeScript的类型定义，这使得在使用TypeScript开发Vue.js应用程序时更加流畅。

5. 更好的Tree-Shaking支持：Vue.js 3.x使得Tree-Shaking更容易，可以轻松地将不需要的代码排除在构建过程之外，减小了应用程序的体积。

6. 更好的组件开发体验：Vue.js 3.x增加了一些新的特性，例如Teleport组件、动态组件、Suspense组件等等，这些特性可以帮助开发者更好地组织和管理组件。

总之，Vue.js 3.x带来了很多改进和优化，包括性能、开发体验、组件抽象等方面，这些改进可以提高开发效率，降低应用程序的体积，提高用户体验。

响应式系统的改进：
Vue2响应式的缺点：
1.无法监听数组的变化：Object.defineProperty 只能监听对象属性的变化，无法监听数组的变化，需要通过其他手段进行处理【Vue.set、 splice 】
2.只能劫持对象属性：Object.defineProperty 只能劫持对象属性的读取和赋值操作，而不能劫持对象本身的变化，例如对象的添加、删除等操作。
3.初始化时递归遍历问题：Vue 2.x 基于 Object.defineProperty 实现的响应式系统需要在组件初始化时递归遍历对象属性，对于大规模的对象，这个过程的开销比较大。
4.不支持 Map 和 Set 等数据类型：Object.defineProperty 只支持普通的对象，无法监听 Map 和 Set 等数据类型的变化。
5.兼容性问题：Object.defineProperty 的兼容性存在一定问题，尤其是在 IE8 及以下版本的浏览器中不支持。
因此，Vue 3 使用了新的响应式实现方式 Proxy 来替代 Object.defineProperty，从而解决了上述缺陷，提升了 Vue 应用的性能和可靠性。

3. Vue2与原型链的关系以及Vue3与原型链的关系？

在 Vue 2 中，响应式系统是通过使用 Object.defineProperty() 方法来实现的。它会将组件的 data 对象中的属性转换为 getter 和 setter 函数，从而实现数据的监听和更新。

在 Vue 组件中，每个实例都有一个对应的原型对象（prototype）。原型对象是一个普通的 JavaScript 对象，用于存储共享的属性和方法。在 Vue 中，原型对象上有一些特殊的属性和方法，比如 $data、$props、$watch、$on 等。

当我们在组件的 data 对象中定义一个属性时，Vue 会通过 Object.defineProperty() 将其转换为一个 getter 和 setter 函数，并将其添加到组件实例的原型链中。这样，当我们在组件中访问这个属性时，实际上是通过原型链上的 getter 函数来获取值的。

因此，可以说 Vue 2 的响应式系统与原型链密切相关。Vue 会将组件的 data 对象中的属性添加到组件实例的原型链中，以实现响应式的更新。同时，Vue 也会在原型对象上添加一些特殊的属性和方法，以便开发者能够更方便地使用响应式系统。

Vue 3 中的响应式系统相比 Vue 2 有了较大的改进，使用了 Proxy API 来实现数据的监听和更新。相比于 Vue 2 的 Object.defineProperty() 实现方式，Vue 3 的 Proxy API 在性能和功能上都有很大的提升。

在 Vue 3 中，每个组件实例都是由一个“渲染代理”（Render Proxy）对象来代理的。这个渲染代理对象可以访问组件实例的数据，也可以访问组件实例的原型链。和 Vue 2 类似，组件实例的原型链中包含了一些特殊的属性和方法，比如 $data、$props、$watch、$on 等。在 Vue 3 中，这些属性和方法仍然可以通过原型链访问到。

但是，和 Vue 2 不同的是，Vue 3 中的响应式系统并不依赖于组件实例的原型链。相反，Vue 3 中的渲染代理对象会直接代理组件实例的所有数据，并使用 Proxy API 来实现对数据的监听和更新。

这种设计可以带来一些好处。例如，由于不依赖原型链，Vue 3 可以更灵活地管理组件实例的数据，包括跨越组件边界的数据访问。同时，由于使用 Proxy API，Vue 3 的响应式系统在性能和功能上都有很大的提升。

因此，虽然 Vue 3 仍然使用原型链来访问组件实例的一些特殊属性和方法，但它的响应式系统并不依赖于原型链。相反，Vue 3 中的渲染代理对象直接代理组件实例的所有数据，并使用 Proxy API 来实现对数据的监听和更新。