vue.js是干什么的？各个版本有什么区别？

vue.js 是一个开源的渐进式 javascript 框架。

特点

轻量级框架

相对于 react 和 angular，vue.js 更简单、易于理解和上手。

数据双向绑定

采用声明式编程，通过更改数据自动触发视图更新，与 react 类似。

指令

提供了许多内置指令，操作页面方便。

组件化

支持组件化开发和封装可复用代码，与 react 和 angular 类似。

前端路由

支持前端路由、构建单页面应用（Single Page Application）、服务器端渲染（Server-Side Rendering）应用，与 react 和 angular 类似。

单向数据流

组件状态管理采用了单向数据流，与 react 类似。

vue.js 2 的缺点

对 typescript 的支持不友好

vue.js 2 对 typescript 的支持不友好，对构建大型项目不利

mixin 混入缺陷

vue.js 2 使用 mixin 混入来抽取相同代码逻辑，当一个组件有多个 mixin 时，代码会变得难以阅读，因为不知道哪个属性来自哪个 mixin，多个 mixin 中的属性容易发生冲突。

响应式系统缺陷

vue.js 2 采用 Object.definedProperty 来进行数据劫持，这种方式存在缺陷，无法劫持和监听对象添加或删除属性时的变化，无法遍历对象的每个属性，包括对于对象属性的对象进行深度遍历，导致性能低下。

逻辑零散

vue.js 2 使用 Options API 编写组件，当实现某个功能时，对应的代码逻辑会被拆分到各个属性中，一旦组件变得复杂，逻辑就会变得零散。

vue.js 3 的变化

monorepo 源码管理

vue.js 3 对项目管理进行了重大重构，采用 monorepo 方式来管理。

mono 是单个的意思，repo 是 repository 的简写，monorepo 的意思是将许多项目的代码存储在一个 repository 中。

vue.js 2.6.14

vue.js 2 将所有源代码都写在 src 目录下，按照不同功能划分成多个文件夹，compiler(模板编译相关)、core(核心运行时)

vue.js 3.2.23

vue.js 3 将不同模板拆分到了 packages 目录下的子目录中，每个模块可以看作一个独立的项目，具有自己的类型定义、api、测试用例等。

将每个模块划分为独立的项目，不仅让整个结构更清晰，容易让开发者阅读、理解和修改模块代码，提高了代码的可维护性和扩展性。

采用 typescript 进行重构

vue.js 2 整个项目使用 flow 进行类型检测，flow 在很多复杂场景中对类型的支持不是非常友好。

从 vue.js 3 开始，项目全面采用 typescript 进行重构。

采用 proxy 进行数据劫持

vue.js 2 采用 Object.definedProperty 来进行数据劫持，这种方式存在缺陷，给对象添加或者删除属性时，无法进行劫持和监听。

为了解决此问题，提供了专门的 api，例如 vm. $set 和 vm.$ delete。

vue.js 3 采用 proxy 实现数据劫持。给对象添加或者删除属性时，proxy 可以劫持和监听到，因为 proxy 劫持的是整个对象，劫持的类型比 Object.definedProperty 更丰富，不仅可以劫持 set、get，还可以劫持 in、delete 操作。

编译阶段优化

vue.js 3 在编译阶段进行了多项优化，用于提高应用程序和性能和效率。

生成 block tree

在编译阶段，vue.js 3 对静态模板进行分析，生成 block tree 更好进行性能优化。

block tree 是 vue.js 3 中的新概念，是一个基于模板静态分析的数据结构，用于描述模板和子模板之间的关系，从而提高渲染效率。

slot 编译优化

vue.js 3 对 slot 的生成进行优化，对于非动态 slot 中属性更新，只会触发子组件更新，减少更新次数和计算量。

diff 算法优化

相对于 vue.js 2，vue.js 3 在 diff 算法上进行了多项优化，采用更高效的算法和数据结构，减少了更新操作的次数和计算量，提高应用程序的性能。

Composition API

vue.js 2 使用 Options API 编写组件，其中包含 data、props、methods、computed 和生命周期等选项。

在实现某个功能时，对应的代码逻辑会被拆分到各个属性中，如果组件变得更大或更复杂，逻辑就会变得非常分散，需要在多个选项之间寻找，不利于后期维护和扩展。

vue.js 3 主要使用 Composition API 编写组件，兼容 Options API 。

Composition API 包含 ref、reactive、computed、watchEffect、watch 等函数，Composition API 可以将相关的代码放在一起进行处理，封装成一个 hook 函数来支持数据的响应式，避免 mixin 混入带来的缺陷。这样可以方便实现在多个组件之间共享逻辑，提高代码可读性和可维护性。