获得徽章 13
- Vue3.0 ref和reactive的区别
使用层面：
ref在使用时需要使用.value访问熟悉过，在template中不需要.value
reactive 可以直接访问不需要.value
数据层面：
ref推荐绑定基础类型数据，虽然也可以绑定应用类型数据接收的数据仍然是使用reactive去实现的。
reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据。
底层方面：
ref是实用createRef创建响应声明，在createRef方法中接受两个参数value和shallow(深或浅)，该函数执行完成之后返回了RefImpl，之后利用类的属性访问器，取值的时候track来进行依赖收集，设置值的时候调用trigger去触发更新。属性访问器通过babel转化成es5代码就是defineProperty。
reactive函数中使用createReactiveObject创建响应式对象，reactive接收一个普通对象，reactive接收的是一个对象形式，如果不是对象形式就会抛出一个错误，如果是返回该普通对象的响应式代理，响应式代理是基于基于es6的 Proxy 实现，响应式代理响应式转换是“深层的”，会影响对象内部所有嵌套的属性。然而返回的代理对象不等于原始对象。reactive的时候接收的实际上是个对象，当然也可以接收一个数组,如果目标对象存在并且是一个只读的会直接返回这个对象，否则会创建一个reactive 对象。
总结：
reactive只能接收一个引用对象，不可以传递普通类型的数据，比如字符串、数字等，但是ref可以，因为ref返回的是一个响应式代理对象，这个对象value值就是我们的传递参数。
所以如果是想代理一个对象或者是数组还是使用reactive更合适，如果我们想要代理一个普通类型的值就需要使用ref去代理更合理。展开评论2 - 213
![[思考]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_15.f58c082.png)
ppchart.com![[无辜呆]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_96.4fb9d71.png)