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定義