在vue3中，数据的类型声明一般使用ref或者reactive，两种方法都是用的泛型定义的类型，都是Vue3中用来实现数据响应式的API。
两者的区别
1.ref： 从原理上看，ref通过Object.defineProperty()的get和set实现数据代理。
2.reactive： 从原理上看，reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据。
| ref | reactive |
|---|---|
| 用于定义基本类型和引用类型 | 仅用于定义引用类型，对象或数组（原因在于内部是通过ES6的Proxy实现响应式的，而Proxy不适用于基本数据类型） |
| ref定义对象时，底层会通过reactive转换成具有深层次的响应式对象，所以ref本质上是reactive的再封装 | |
| 在脚本里使用ref定义的数据时，要加.value后缀，在模板里不需要，因为Vue3会自动加上 | 直接使用 |
| 定义数组时，建议使用ref，从而可避免reactive定义时值修改导致的响应式丢失问题 | tableData = xxx 的修改方式会造成 tableData 响应式丢失，需要使用push方法或在数组外层嵌套一个对象调用内层赋值等来规避 |
