响应式基础核心ref和reactive
- ref()：接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性
.value，在使用时都需要通过.value使用。可以是基本数据类型也可以是对象 - reactive()：返回一个对象的响应式代理。
区别
ref和reactive都是响应式的基础，主要区别是ref一般接受的数据是简单数据，reactive接受的是对象，reactive内部原理也是通过ref解包把对象的属性变成响应式，然后通过Proxy进行代理再返回，使用时跟普通对象基本一致。ref也可以接受对象数据，当ref接受数据为对象时，会通过reactive进行响应式处理，所以会涉及ref的嵌套，得出结论就是：当响应式数据为对象时，使用reactive优于ref
reactive内部ref 的解包：
const count = ref(1)
const obj = reactive({ count })
// ref 会被解包
console.log(obj.count === count.value) // true
// 会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2
// 也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3
其他响应式工具
- isRef()：判断一个数据是否为ref数据，返回值为Boolean值，可以作为类型检查守卫使用
- unref()：如果参数是 ref，则返回内部值，否则返回参数本身。效果与如下相同这是
val = isRef(val) ? val.value : val - toRef()：基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步，用法如下：
const state = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(state, 'foo')
// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2
// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3
toRef() 这个函数在你想把一个 prop 的 ref 传递给一个组合式函数时使用
<script setup>
import { toRef } from 'vue'
const props = defineProps(/* ... */)
// 将 `props.foo` 转换为 ref，然后传入
// 一个组合式函数
useSomeState(toRef(props, 'foo'))
</script>
- toRefs()：将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的数据内部都是使用
toRef()创建的，当某个响应式对象数据使用很频繁时，为了使用方便，不需要每次使用都用对象.属性读取的方式，可以使用toRefs()将整个响应式对象转出来，再通过解构或者扩展的方式使用，且不会丢失响应式。例：
const state = reactive({ foo: 1, bar: 2 })
// ...基于状态的操作逻辑 // 在返回时都转为 ref
return {
...toRefs(state)
}
