前言：

最近在学vue源码，vue已经到vue3(beat)版本（目前官方建议不在生产环境使用），说实话vue2和vue3的有了质的飞跃（主要是性能上）。想对vue3有更好的了解我强烈推荐看看尤大的介绍视频（vu3尤大介绍视频）。这篇文章就是我看过之后自己的心德与理解总结。

一、vue3的新特性及新增api

1.响应式原理

vue2的响应式原理是利用Object.defineProperty而vue3则是利用Proxy。Proxy的性能和功能比Object.defineProperty强很多（这里的强是指api支持更好源码层次）。可以看一下这边文章Proxy 与Object.defineProperty介绍与对比(vue源码运用)传送门。就能更好的了解变化。

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

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

Vue 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.性能上发生了很大的变化：

根据尤大大的vue视频来看进行了一下方面的优化

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

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

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

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

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

可以看看官网 里面 写了 vue2到 3 的变化 和移出的 api 

vue2 迁移 到 vue3

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

尤大大对vue3的介绍视频地址

vue3专题博客这个里面涉及尤大提到的diff算法，响应式原理之类的具体做了哪些优化给出了介绍（我就不班门弄斧了哈哈，毕竟我是个小菜鸟）。

  强烈推荐看看这些博客 ：vue3专题

三、vite

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。（我的理解就是不用打包，跳过了这个环节。之前必须使用webpack打包，尤大大做这个的初衷是觉得webpack用不惯，就干脆自己写了一个，我表示大佬就是厉害，不得不佩服）
vite介绍  vite使用及介绍

vite github地址

vite现在还在测试中不建议使用在生产环境。

四、结语

我觉得vue3会是前端发展趋势（正式发布之后会火爆），react有的api功能，vue基本都实现了且性能给方面真的提高了很多。

所以提前了解和学习vue3是有必要的。

本文只是我自己的理解，可能有不对的地方（我只是做个记录）。