前端基础之《Vue（28）—Vue3 ref相关API》
ref相关API介绍
1、ref()
（1）ref介绍
ref用于定义基本数据类型，比如：string / boolean / number等（因为这几个没办法代理）。
ref的背后是使用reactive来实现的响应式。
使用.value来访问变量的值。
（2）打印一个ref对象
RefImpl引用实现，就是个响应式变量
因为Vue3给基本数据类型外面包了一层（做了Proxy()代理，加get、set钩子），你传了1000进来，得到的是对象
num = {
value: 1000
}
（3）ref的变量在视图模板中都不要加.value，因为指令会自动加
2、isRef()
（1）作用：判断一个变量是否为一个ref对象
（2）语法：const bol = isRef(x)
3、unref()
（1）作用：用于返回一个值，如果访问的是ref变量，就返回其.value值。如果不是ref变量就直接返回
这是 val = isRef(val) ? val.value : val 计算的一个语法糖
（2）语法：const x = unref(y)
4、customRef()
（1）作用：自定义ref对象，把ref对象改写成get/set，进一步可以为它们添加track/trigger
（2）、customRef()关联的生命周期钩子
onRenderTracked()
onRenderTriggered()
这两个是用于调试的，只能在开发环境使用，生产环境不起作用。用来对变量进行劫持。
const name = customRef((track, trigger)=>{ // track和trigger是两个函数let value = ''return {get () {track() // 如果有人访问name，就执行track()return value},set (val) {value = valtrigger() // 如果有人修改name，就执行trigger()}}})// 仅供在开发环境下，用于ref变量的调试onRenderTracked((ev)=>{console.log('name被跟踪了', ev)})onRenderTriggered((ev)=>{console.log('name被修改了', ev)})5、toRef()
（1）作用：把一个reactive对象中的某个属性变成ref变量
（2）语法：const x = toRef(reactive(obj), 'key')
<script setup>import { reactive, toRef } from 'vue'const user = reactive({name: '张三', age: 10})console.log('---user', user)const name = toRef(user, 'name')console.log('---name', name.value) // name是ref变量</script>
6、toRefs()
（1）作用：把一个reactive响应式对象变成ref变量
（2）语法：const obj1 = toRefs(reactive(obj))
（3）应用：在子组件中接收父组件传递过来的props时，使用toRefs把它变成响应式的
例如：const {a, b} = toRefs(props)
<script setup>import { isRef, reactive, toRef, toRefs } from 'vue'const user = reactive({name: '张三', age: 10})console.log('---user', user)// const name = toRef(user, 'name')// console.log('---name', name.value) // name是ref变量const {name, age} = toRefs(user)console.log('---1', isRef(name))console.log('---2', isRef(age))</script>
7、shallowRef()
（1）作用：对复杂层级的对象，只将其第一层变成ref响应（性能优化）
用shallowRef包裹的对象，只有第一层变化才更新，更改后面的层不更新，第一层是.value
（2）语法：const x = shallowRef({a:{b:{c:1}}, d:2})，如此a、b、c、d变化都不会自动更新，需要借助triggerRef来强制更新
（3）shallowRef只劫持第一层
<script setup>import { isRef, reactive, toRef, toRefs, shallowRef, ref } from 'vue'// ref包裹对象const info1 = ref({a: {b: {c: 3}}})console.log('---3', info1.value.a.b.c) // 要访问c，需要写的很长const info2 = shallowRef({a: {b: {c: 3}}})console.log('---4', info2) // 只有info2.value = xxx 才会更新</script>8、triggerRef()
（1）作用：强制更新一个shallowRef对象的渲染
（2）语法：triggerRef(shallowRef对象)，只能接收一个shallowRef的变量，强制更新这个变量
9、reactive()
（1）作用：定义响应式变量，一般用于定义引用数据类型，如果是基本数据类型，建议使用ref来定义
（2）语法：const info = reactive([])
（3）如果定义对象类型、数组类型声明式变量，用reactive定义