Vue3新特性

一、响应式系统

1.vue2中的响应式

    在vue2中，响应式机制是基于Object.defineProperty()实现的，但是Object.defineProperty()只能够拦截对象中存在的属性，所以vue2中的所有数据必须要在data里声明。同时当拦截的对象是一个数组时，对数组的操作并不能完美的拦截，需要额外的辅助API来协助完成。

2.vue3中的响应式

    在vue3中，实现响应式的方式由Object.defineProperty()变更为了Proxy，Proxy拦截一个对象时，该对象内所有的属性都将会被监听，且它还能够监听Set和Map等更数据格式。

二、自定义渲染器

1.响应式独立

    在Vue2中，响应式只服务于Vue，而在Vue3的组织架构中，响应式独立了出来，Vue3的响应式就和Vue解耦了，你甚至可以在Node.js和React中使用响应式

2.渲染逻辑拆分

    在Vue3中,渲染逻辑被拆分成平台无关渲染逻辑和浏览器渲染API两部分,若需要使用Vue3开发小程序和客户端时,只需要实现平台的渲染逻辑就可以了。

三、全部模块使用TypeScript重构

1.引入类型系统的好处

（1）类型系统带来了更方便的提示
（2）类型系统让代码更健壮

四、Composition API 组合语法

1.Options API的问题

（1）所有数据都挂载在this之上，因此OPtions API的写法对TypeScript类型退导很不友好
（2）新增功能基本都得修改data、method等配置，开发体验很不友好
（3）代码复用困难，很难抽离通用逻辑，只能使用mixin

2.使用Composition API的好处

（1）所用API通过import引入，对于没有使用的功能，打包是会自动清理
（2）相同功能模块的代码可以在同一个地方书写
（3）代码复用方便
（4）<script steup> 语法糖

五、新的组件

Vue 3 内置了 Fragment、Teleport 和 Suspense 三个新组件

1.Fragment

Vue 3 组件不再要求有一个唯一的根节点，清除了很多无用的占位 div。

2.Teleport

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

3.Suspense

异步组件，更方便开发有异步请求的组件