什么是reactive

reactive从字面意思上讲就是响应式，在vue中是把你的数据状态转换为可响应的，它的基本用法如下

<p>{{data.a}}</p>
const data = reactive({a:1,b:[]})

这里返回的data就是可以响应的，它会自动收集依赖，并在数据变化的时候重新执行依赖。比如，你在模板中使用了,然后你改变了data.a的值，那么网页上渲染的值也自动会变化，这就是响应式最基本的应用。

vue3的reactive相比于vue2有利有弊，他们有这些不一样的地方：

reactive添加就是深度响应，无论里新增属性，删除属性都可以，而在vue2里，新增和删除属性是不会响应，所以才会$set这种api,vue3已经完全不需要了。
vue3的响应式基于es6的proxy,而proxy是浏览器底层api,是无法polyfill的，因此它对于浏览版本的要求会更高。基本上IE系列就别想了，最起码也得edge。chrome支持度还不错，49以上就支持了，但我好像记得chrome支持window xp的最后一个版本就是49，不知道有没有人试验一下xp支不支持vue3。iOS 则需要在10以上，这个应该问题不大。因此vue3的主要兼容性问题就在IE上，使用IE的只能选择vue2.7了
vue3的响应式支持的类型更多，涵盖了所有js的类型，甚至有一些较冷门的类型，比如Map\WeakMap等等，如果我没记错的话。在vue2只支持Map的遍历，不支持Map的响应

几个常用的API

readonly 创建一个只读读写的对象，不能修改。
toRaw 获取原始对象，一个对象经过reactive之后，其实是被代理过了，返回的是一个Proxy实例，如果你需要获取原始对象可以采用这个方法。但我一般直接使用，展开符。

const data = reactive({a:1,b:[]})
const raw = {...data}

这样展开之后，raw就不再具有响应式了，有的时候，我专门需要不追踪这个值的变化。比如我发送ajax请求，这个值用一次，之后就再不需要了，如果我直接data.a，那么data.a就会被追踪一次依赖。

watchEffect(()=>console.log(data.a))

比如我这样使用，那么当data.a变化,就会自动打印一遍，它会把你传入的那个函数里只要有响应式数据都会添加依赖，相比于watch需要监听一个具体的对象，使用起来更加方便灵活.