大家好，我们接着上文的升级vue本地实战记录，这次主要是给大家分享vue3中最重要的两个语法ref和reactive以及自己的一些理解。
1.ref
ref是干什么的
我的理解的就是声明一个响应式的数据。
比较官网一点的话就是:接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向
内部值的单一属性 .value。
所以在vue3中如果我们想声明一个响应式的数据就需要用到这个方法了。
ref的用法
第一种，我们可以用它声明一个常量
const num = ref(1) || const num1 = ref("1")
获取的时候需要使用.value来进行获取
举例：num.value = 1
第二种，我们可以用它声明一个对象或者数组
const obj = ref({ num:1 }) || const arr = ref([{name:"张三"}])
获取对象或者数组的时候也需要使用.value来进行获取
举例：obj.value.num = 1
ref的源码实现
我们首先看一下使用ref声明一个响应式数据的实现方法
如图一所示，首先通过了__v_isRef来判断当前的数据是否被进行了响应式转换。如果没有的话就会进行 new
RefImpl进行返回，在RefImpl进行数据劫持并进行判断，当前的数据是数组或者是对象交给reactive处理不
是的话就自己处理。对应上图二的get和set方法。这种数据劫持其实跟vue2的基本实现理念是一样的。
上面我们说到如果使用ref声明一个对象或者数组那么它就会帮你去调用reactive的方法，那我们实践看一下
实际调用后控制台的输出(如下图所示)，而reactive的源码实现方法我们留在下面reactive单独讲解。
我们可以看到被一个proxy进行了包裹返回一个响应式代理。
其实上面我们所说到的只是关于ref的一个基本实现方法，后面还有收集依赖创建容器更新试图等一些功能。
在这里无法进行更多的探讨。有兴趣的可以查看源码实现方式。
2.reactive
reactive是干什么的
我们上面已经简单了解了ref，reactive跟ref理念一样都是为了实现一个响应式数据的，其实ref就是
reactive另一种实现方式，reactive能实现的ref也能实现，在实现功能方面上ref要比reactive强大，
但是两者各有千秋，实际参与项目就可以体会出来。
reactive的用法
我们只能用它声明一个对象或者数组，是不推荐声明变量的，因为声明成功也不是响应式的变量，毫无意义
const state = reactive({ str: 'test', list: [], });
获取对象或者数组的时候直接.你所需要的key就可以
举例：state.str = "test"
reactive的源码实现
图片我是按照顺序排下来的
首先第一个疑问就是为什么我上面所提到的，为什么推荐声明变量的 毫无意义，里面又有个方法
targetTypeMap()，这个方法进行了判断，如果传入进来的是一个基础数据类型的时候，他会
return回去不做任何操作。所以我们得不到一个响应式的数据。
第二个疑问：reactive是怎么实现数据劫持代理的，其实我们可以看createReactiveObject()
这个方法，这个方法的最后返回了proxy对象，就是在这进行一个数据劫持代理的。如果有不了解proxy
的推荐大家可以找找阮一峰阮老师的课程了解一下，这也是必须要知道的知识点。
👋 写在最后
以上内容纯粹代表自己观点。顺便记录学习一下。不然记得快忘的更快。我们下文再见。
我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。
