Vue3 Ref和Reactive区别

（一）需求

被问到,Ref和Reactive区别，不会。这里小结记录下。

（二）介绍

1、共同点：

• 都是用来创建响应式数据的；
• 都可以创建对象类型的响应数据；

2、不同点：

（1）Ref

• 主要用来创建基础数据类型的响应数据；

<!-- 模板语法> 
<template>
   <div>{{state}}</div>
</template> 
//js 脚本
setup(){
     let state = ref(10) 
     state.value = 11
     return {state}
}

• ref响应式原理是依赖于Object.defineProperty()的get()和set()实现的

• 如果想创建对象类型(其实底层的本质还是reactive,系统会自动根据我们给ref传入的值转换成：{value:''}来实现

ref(1)->reactive({value:1})
//ref函数只能操作浅层次的数据，把基本数据类型当作自己的属性值；深层次依赖于reactive

（2）Reactive

是用来创建引用类型的响应式数据的用法（参数必须是引用类型）；

<!-- 模板语法> 
<template>
   <div>{{state.name}}</div>
</template> 
//js 脚本
setup(){
     let state = reactive({name:'aaa'}}) 
     state.name = 'zhangsan'
     return {state}
}

• 原理是是使用Proxy递归遍历对象实现的
• 源码

参考链接

juejin.cn/post/701332…

写在最后的话

学习路上，常常会懈怠。

《有想学技术需要监督的同学嘛~》 mp.weixin.qq.com/s/FyuddlwRY…

如果有需要的伙伴，可以加我微信：learningisconnecting 或者可以关注我的公众号：国星聊成长（我会分享成长的方法）