一、前言
大家好，我是地霊殿__三無，兜兜转转，总算略有空闲，可以静下来学习学习vue3的相关知识了，在学习之余记录一下，加深印象。
二、reactive
1、介绍
reactive可以用来包装一个对象，使其每个对象属性都具有响应性（也就是深层次响应式）。
2、特性
reactive内部是基于es6的proxy实现的，它接收一个对象(object)或者数组（arr），返回一个proxy代理对象，通过这个对象操作源对象内部数据做出改变。
需要注意的是，基本类型数据就不用reactive了，虽然也可以使用，但会报警告。
3、用法
在引入reactive后，用法上也就是定义的时候，跟我们以往定义定量有所不同，需要用reactive来定义对象或者数组，其余地方就可以像vue2那样，直接读取属性。
import { reactive } from 'vue'
const job = reactive({
name: '股市',
str: '做梦'
})
const arr = reactive([
1, 2, 3, 4, 5
])
在页面里使用
<div class="title" @click="funReact">
{{ job.name }}--{{ job.str }}-{{arr[2}}
</div>
在函数里调用
function funReact () {
arr = [6, 7, 8, 9, 10]
console.log(job.name)
console.log(job.str)
console.log(arr[2])
job.str = '做春秋大梦'
}
默认情况下，修改对象无法实现界面的数据绑定更新,所以上面函数对arr直接进行修改，在数据层面是修改了，但是并不会响应到页面上进行改变。 如果需要更新，需要进行重新赋值，像上述的job.str一样。（即不允许直接操作数据，需要放个新的数据来替代原数据）
三、ref
1、介绍
ref和reactive一样,也是用来实现响应式数据的方法，用于基础数据实现响应式。主要是提供一个简便版的reactive
2、特性
ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.
3、用法
ref支持字符串，数字，布尔值
import { ref } from 'vue'
const bool = ref(false)
const num = ref(233)
const str = ref('奥特曼')
在页面里使用，用法基本相同
<div @click="funRef">
{{ bool }}-{{ num }}-{{ str }}
</div>
在函数里调用，跟reactive不同的是，必须添加.value后缀，才能访问到，不然只能得到一个proxy对象。
function funRef () {
bool.value = true
num.value = 666
str.value = '小怪兽'
console.log(bool.value, num, str.value)
}
红框就是num，我们不用value，得到的就是它的proxy对象。
4、ref获取元素
this.$refs在vue3中已经消失了，所以我们得用ref来获取对应的dom元素
第一步，准备一个dom元素，我们定义ref的值为box
<div ref="box" @click="funRef">
{{ bool }}-{{ num }}-{{ str }}
</div>
第二步，生成一个同名变量，然后获取dom
这里分两种写法，
第一个是setup函数
在setup函数下的最外层，声明box变量，然后需要调用onMounted函数，才能在挂载之后获取到dom元素，这里的box.value就是dom元素了。
import { ref, onMounted } from 'vue'
setup() {
const box = ref(null)
onMounted(() => {
console.log(box.value)
})
return {box}
}
第二个是setup标签
在setup标签里，也是最外层，声明box变量，可以直接在函数里使用。
import { ref } from 'vue'
const box = ref(null)
function funRef () {
console.log(box.value)
}
四、ref和reactive对比
1、定义数据层面
ref适用于，基本类型（字符串，数字，布尔值）
reactive适用于复杂类型（对象，数组）
2、原理实现层面
ref是通过Object.defineProperty()的get与set，实现的数据劫持响应式
reactive则是通过proxy来实现数据劫持响应式的，并通过代理对象操作源对象内部数据。
3、实际写法层面
ref定义的数据，js中访问 需要添加.value, html不用
reactive定义的数据，js、html访问均不用添加.value
五、总结
reactive和ref各有用途，大家可以根据它们的特性，在合适的应用场景利用起它们。
ps: 我是地霊殿__三無，浅浅记录。
