vue3 ref全家桶

1.ref
ref的主要作用就是将一个变量变成响应式变量。在vue3中，随处定义的变量并不是响应式的，也就是说，如果模板中渲染了这个变量，那这个变量其实是不会驱使视图变更的。
看个例子

<template>
{{message}}
<button @click="checkBut('大王')">测试</button>
</template>
<script setup lang="ts">
let message:string = '小王'
  function checkBut(val:string) {
        message = val
        console.log(message) //输出大王
    }
</script>

修改了message这个变量，值变化了，但是模板却并没有发生变化。
这个时候就需要用到ref这个api了。

import {ref} from 'vue'
let message:string = ref('小王')
function checkBut(val:string) {
        message.value = val
        console.log(message)
    }

ref会返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

image.png

这样message就会变成一个响应式变量。但是在js代码中去访问需要通过.value的方式去访问这个响应式值。
同样的，此api也可以将一个对象变成响应式的，但是访问也需要通过.value的形式。

2.isRef
检查值是否是一个ref对象。是则返回true，不是则返回false

3.unref
语法糖，如果值是一个ref对象则返回此对象，如果不是则返回参数本身。

val = unref(val)等于 val = isRef(val)?val.value:val

4.shallowRef
官网解释：创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的。
大概意思就是创建一个ref，但是这个ref只跟踪到.value，不会再深入去跟踪。
如果这个api只作用于基本数据类型那和ref的效果一样，但是如果传入的是引用类型，则会大有不同

<template>
    {{obj}}
</template>
<script setup lang="ts">
 import {ref,shallowRef} from 'vue'
    let obj = shallowRef({
        name:'小王'
    })
    console.log(obj)
    setTimeout(()=>{
        obj.value.name = '456'
        console.log(obj) //此时name已经被修改了，但是试图并不会发生变化，
    //因为name属性不是响应式的了，
    },1500)
</script>

image.png

而当我们去修改整个value的时候，试图就会发生变化

    import {ref,shallowRef} from 'vue'
    let obj = shallowRef({
        name:'小王'
    })
    console.log(obj)
    setTimeout(()=>{
        obj.value.name = '456'
        console.log(obj)
    },1500)
    setTimeout(()=>{
        obj.value = '456'
        console.log(obj)
    },2000)

image.png

5.triggerRef
强制更新与shallowRef相关的属性。

   import {ref,shallowRef,triggerRef} from 'vue'
    let obj = shallowRef({
        name:'小王'
    })
    console.log(obj)
    setTimeout(()=>{
        obj.value.name = '456'
        triggerRef(obj)
        console.log(obj)
    },1500)

这样，试图就会被更新了

6.customRef
创建一个自定义的ref，有点类似Object.defineProperty。customRef也提供了set和get，我们可以自定义相应事件。
官方解释：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

<template>
    {{msg}}
    <button @click="handleCheckBut">测试</button>
</template>

<script setup lang="ts">
    import {ref,shallowRef,triggerRef,customRef} from 'vue'
    function f(value) {
        return customRef((track, trigger)=>{
            return{
                get(){
                    console.log('get')
                    track() //收集依赖
                    return value
                },
                set(newval){
                    console.log('set',newval)
                    value = newval
                    setTimeout(()=>{
                        trigger() //触发更新
                    },1000)
                },
            }
        })
    }
    let msg = f('哈哈')
    function handleCheckBut() {
        msg.value = '嘿嘿'
    }
</script>

注意这个函数返回的也是个ref对象，赋值的时候也要通过.value去赋值。
此方法好像只能给基本类型用，引用类型属性修改了并没办法跟踪到