vue3有了哪些提升

一、vue3的新特性及新增api

1.响应式原理

vue2的响应式原理是利用Object.defineProperty而vue3则是利用Proxy。。

2.新增了组件 API（Composition API）

vue2使用的是options API而3新增了Composition API（注意是新增，也就是说这两个可以共用，甚至可以互相嵌套使用兼容性很好）

3.片段-碎片（Fragments）

这个类似于react Fragments组件(react Fragment官方文档)。其实就是vue2的时候每个组件必须要有根组件，而vue3就可以不必这样（减少不必要的dom元素）。

4.Suspense

将被用在 Vue 3 中的另一个从 React 学来的功能是 Suspense 组件。Suspense 能够暂停你的组件渲染，并渲染后备组件，直到条件满足为止。react Suspens官方文档（我的理解：当在加载异步组件的时候，等待所有组件加载完毕之前可以做一些事情类似于promise.all()）。举个例子比如父组件请求接口需要3秒请求过来，而子组件是用来显示请求结果的这就是典型的异步组件。这个时候我们就可以用Suspense，实现在等待的时候展现一个组件（就比如移动端页面加载完毕之前都会有骨架，我们·就可以用这个实现）。

5.Portals

其实这个就类似于react的Portals(react Portals官方文档)。

Portals 提供了一种独特的方法来将子级渲染到父组件的 DOM 层次结构之外的 DOM 节点中。”

这种处理模式，是弹出式窗口以及通常显示在页面顶部的组件所使用的一种非常好的方法。通过使用 Portals，你可以确保没有任何主机组件 CSS 规则会影响你要显示的组件，并且可以避免用 z-index 进行的黑客攻击。

6.Custom Renderer API：暴露了自定义渲染API(teleport介绍)

7.Tree shaking support:可以将无用模块“剪枝”。

二、vue2和3的变化

1.响应式原理实现发生了变化。

2.新增了一些api

3.性能上发生了很大的变化：

1.diff算法上优化（让dom渲染时间缩小）

2.响应式原理的优化（减少源码量大小）

3.项目包大小的优化（vue3的cli打包后会比vue2小）

4.更好的支持typescript(这个是直接可以使用)

5.Tree shaking support：可以将无用模块“剪枝”。（模块按需加载减少包大小）

vue2 迁移 到 vue3

综上所述vue3会比vue2快上2到3倍（越大的项目越明显）。而且vue3（可以兼容ie11，应该是需要配置的）和vue2可以完美兼容（尤大大说不必，把项目立即升级vue3）。

一、Composition API

Composition API，即组合式API

高内聚

聚合业务逻辑，提高代码可读性

vue2 通过属性选项（options，如 data、computed、methods 等）书写代码逻辑，代码逻辑点是碎片化、跳跃式的，在大型项目和复杂组件中使得维护变得困难。

vue3 的组合式API能够将分散的逻辑代码组合在一起，使代码逻辑更清晰易读。

低耦合

便于代码拆分，提高复用性

Vue2 中的一个常用代码复用方式是 mixins 混入，mixins在一些场景下确实能很大的提升代码复用率，但同时也会带来一些副作用，比如依赖关系不清晰，mixins里定义的data和methods等在组件中使用时没有明确的引入和定义，而且可能与组件里定义的有命名冲突，有很大的维护风险。

得益于组合式API，vue3里可以通过自定义hooks来实现类似mixins的复用效果，而且不会有vue2里mixins的缺点。

二、Teleport

Teleport，即传送门。

能在不改变组件内部元素父子关系的情况下，将子元素“传送”到其他指定节点下渲染。

三、Fragment

Fragment，即片段。

在 2.x 中，由于不支持多根节点组件，当开发者意外创建多个时会发出警告。 在 3.x 中，组件可以包含多个根节点。Vue3 中，组件的 template 被一层不可见的 Fragment 包裹，支持多个根节点。能够减少 dom 层级、提升渲染性能。

四、Emits

Emits，即组件触发的自定义事件。

在vue2中，组件封装时触发自定义事件给父组件，都是通过 this.$emit()触发，但是触发地点可能会遍布在组件内各个地方，没有统一管理，使用不方便。

vue3里，所有自定义事件都要在emits里定义，和定义props类似，而且还能对事件做自定义校验。这样在使用组件时很方便的就能知道有哪些事件可以使用。

五、动态css

在 <style> 样式标签可以通过 v-bind 绑定<script>里定义的变量，来实现动态的css样式。

六、Tree shaking

Tree shaking，一种按需打包的方式。

由于 es6 的模块化导入导出是静态可分析的，所以在打包的时候通过解析js代码就能明确知道哪部分代码使用了、哪部分代码没有使用，然后只对使用到的代码进行打包，这样就能实现按需打包的效果。

七、VDOM

VDOM，即vue里的虚拟DOM。

vue3里对VDOM进行了重写，优化了Diff算法：

vue2在对比VDOM时，会遍历整个VDOM树，从根节点依次递归遍历到末节点，从而找出所有变化的节点进行局部更新。

vue3会区分静态DOM节点和动态DOM节点，对动态DOM节点做一个 PatchFlag 标记，并将动态节点与根节点绑定，这样，在数据更新对比VDOM时，会从根节点里查找 PatchFlag 标记，跳到动态节点上直接比较，不用遍历静态节点，提升渲染更新的性能。

十、TS支持

TypeScript，是js的一个超集，或者说是加了一层包装，对js做了功能拓展和更严谨的代码校验。

• vue2对ts的支持很不友好，强行使用ts需要引入很多库，使用繁琐，而且支持也不全面。

• vue3本身就是用ts编写的，对ts可以说是全方位的支持。