Vue3新特性

1.RFC机制

        RFC机制是Vue团队开发的工作方式

        Vue的新语法或新功能的讨论，都会先在GitHub上征求意见，邀请社区所有人一起讨论，任何人都可以围观，参与讨论和尝试实现。

2.响应式系统

      Vue2响应式机制是基于Object.defineProperty()这个API实现的，Vue3还使用了Proxy，两者看起来都是都是对数据的读写进行拦截。

        defineProperty是拦截某个属性，对不存在的属性无法拦截，所以Vue2中所有数据必须要在data中声明，并且对数组长度的修改无法实现拦截。

        Proxy这个API就是真正的代理，Proxy是拦截整个obj对象，对于obj具体是啥属性，则不关心统一进行拦截。而且Proxy还监听了更多的数据格式，如Set、Map，这是Vue2所不到的。

3.自定义渲染器

        Vue2中所有模块是揉在一起的，这样做会导致不好扩展的问题，Vue3以拆包的方式，使用monorepo管理方式，响应式、编译和运行时全部独立了。Vue2中的响应式只服务于Vue，而Vue3的响应式就和Vue解耦了，甚至可以在Node.js和React中使用响应式。

        渲染的逻辑也拆成了平台无关渲染逻辑和浏览器渲染API。

        在这个框架下，Node的一些库，甚至React都可以依赖响应式。在任何时候，如果希望数据改变之后通知你，都可以单独的依赖Vue3响应式。

        Vue3由响应式、编译和运行时几部分组合在一起就是运行在浏览器端的Vue3，每个模块又都可以独立扩展出新的功能。

4.全模块使用TypeScript重构

        Vue2使用的类型系统是Flow.js，但是已经不更新了。

        Vue3选择了TypeScript，TypeScript官方也对使用TypeScript开发Vue3项目的团队有更加友好。

5.Composition API 组合语法（setup()）

        使用Composition API后带来的好处：

        a. 所有API都是import引入的，对Tree-shaking很友好，没有用到的功能打包的时候会被清理掉，减小包的大小。

        b. 不用上下反复横跳，可以把一个功能的methods、data都放下一起书写，维护更轻松。

        c. 代码方便复用，可以把一个功能所有的methods、data封装在一个独立的函数里，复用代码非常容易。

        d. Composition API新增的return等语句，在实际项目中使用<script setup>特性可以清除。

6.新组件

        a. Fragment: Vue3组件不在要求有一个唯一的根节点，清除了很多无用的占位div。

        b. Teleport: 允许组件渲染在别的元素内，主要在开发弹窗组件时特别有用。

        c. Suspese：异步组件，更方便开发有异步请求的组件。

7.vite-新的工程化工具

        vite不在Vue3的代码包内，和vue也不是强绑定，Vite的竞品是Webpack。

        Vite主要是提升开发体验，Webpack等工程化工具原理，根据import依赖逻辑，形成一个依赖图，然后对用对应的工具，把整个项目打包后，放在内存里再启动调试。耗时较长，Vite主要解决了这个时间资源的消耗问题。

        Vite工作原理，一开始就开始准备联调，然后根据首页的依赖模块，再去按需加载，这样启动调试所需要的资源会大大减少。