java高频面试题-前端篇

1.vue2和vue3区别？
性能优化：Vue 3在性能方面有显著的改进，包括更快的渲染速度和更小的包大小。
Composition API：Vue 3引入了Composition API，这是一种新的组织组件代码的方式，可以更好地组织和重用逻辑代码。
TypeScript支持：Vue 3对TypeScript的支持更加完善，包括更好的类型推断和更好的类型定义文件。
更好的Tree-shaking：Vue 3的代码结构更加优化，可以更好地支持Tree-shaking，减小打包后的文件大小。
Teleport组件：Vue 3引入了Teleport组件，可以更方便地在DOM树中的不同位置渲染组件。
更好的响应性系统：Vue 3中的响应性系统进行了重写，使得其更加高效和可靠。
更好的TypeScript集成：Vue 3中的TypeScript支持更加完善，包括更好的类型推断和更好的类型定义文件。
Vue 3在许多方面都进行了改进，以提供更好的开发体验和更好的性能

2.vue3中实现数据响应式有哪几种方式？
1.ref：ref函数用于创建一个响应式的数据引用，可以包装基本类型的数据，如数字、字符串等。使用ref函数创建的数据引用可以通过.value访问和修改数据。
2.reactive：reactive函数用于创建一个响应式的对象，可以包装对象类型的数据。使用reactive函数创建的响应式对象可以直接访问和修改其属性，而不需要像Vue                          2中那样使用Object.defineProperty来劫持属性的访问和修改。
3.readonly：readonly函数用于创建一个只读的响应式数据引用或响应式对象，防止其被修改。
4.toRefs：toRefs函数用于将一个响应式对象转换成普通对象，但保留其属性的响应式特性。这在需要将响应式对象的属性传递给子组件时非常有用。

3.说一下vue3中什么叫Composition API？
Vue 3中的Composition API是一种新的组织组件代码的方式。它允许开发者根据逻辑相关性而不是选项类型来组织组件的代码。Composition API通过将逻辑代码封装到可重用的函数中，使得代码更易于维护、测试和重用。
使用Composition API，可以将相关的代码逻辑组合在一起，而不需要按照选项的顺序来组织代码。这使得组件更加清晰和易于理解。此外，Composition API还可以更好地支持TypeScript，并且可以更好地重用逻辑代码。
Composition API是Vue 3中引入的一种新的组织组件代码的方式，可以让开发者更灵活地组织和重用组件的逻辑代码。

4.说一下对vue中Tree Shaking的理解？
Tree Shaking是指在打包过程中通过静态分析和代码优化，去除未使用的代码，以减小最终打包文件的大小。Tree Shaking的概念最初是由Webpack引入的，但在Vue中也有类似的优化机制。
在Vue中，Tree Shaking可以帮助我们去除未使用的组件、指令、过滤器等代码，从而减小打包后的文件大小。这样做有助于加快页面加载速度，特别是在移动端或者网络条件不理想的情况下。
为了实现Tree Shaking，在编写Vue组件时，需要遵循一些最佳实践，包括：
使用ES模块语法：确保你的Vue组件使用ES模块语法，这样Webpack可以更容易地进行静态分析和优化。
避免副作用：在Vue组件中避免副作用，比如在created或mounted生命周期钩子中直接操作全局变量或进行一些非纯函数的操作。
按需引入第三方库：如果使用了第三方库，尽量只引入需要的部分，而不是整个库。
Tree Shaking是一种优化技术，可以帮助减小打包后的文件大小，提高页面加载速度。在Vue中，遵循一些最佳实践可以帮助我们利用Tree Shaking来优化我们的应用程序。