【vue3】ref全家桶

ref全家桶包含（ref、isRef、toRef、toRefs、shallowRef、triggerRef、customRef）

一、ref()

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value
!

<template>
  <div>{{name}}</div>
  <button @click="btn">按钮</button>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
let name = '你好'
const btn=()=>{
    name = '不好'
    console.log(name) // 控制台显示不好,但是视图上无变化
}
</script>

<style scoped>
</style>

ref 写法

import { ref } from 'vue'
let name = ref('你好')
const btn=()=>{
    name.value = '不好'
    console.log(name)
}

二、isRef()

检查某个值是否为 ref。

import { ref, Ref,isRef } from 'vue'
let name: Ref<string | number> = ref("你好")
let notRef:number = 123
const btn = () => {
  name.value = "change msg"
  console.log(isRef(name)); //true
  console.log(isRef(notRef)); //false
  
}

三、toRef()

基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

import { reactive,toRef } from 'vue'
const name = reactive({
  foo: 1,
  bar: 2
})
const fooRef = toRef(name, 'foo') // 转化为响应式对象
const btn = () => {
    fooRef.value++
    console.log(fooRef.value)
}

四、toRefs()

可以帮我们批量创建ref对象主要是方便我们解构使用

import { reactive,toRefs } from 'vue'
const name = reactive({
  foo: 1,
  bar: 2
})
const stateAsRefs = toRefs(name) // 批量转化为响应式对象
const btn = () => {
    const {foo,bar} = stateAsRefs
    foo.value++ 
    console.log(foo,bar)
}

五、shallowRef()

import { Ref,shallowRef  } from 'vue'
type Obj = {
  name: string
}
const name:Ref<Obj> = shallowRef({name:'你好'})
const btn = () => {
    name.value.name='不好'
    console.log(name.value) // 数据改变 但是视图不更新
}

shallowRef()写法处理

import { Ref,shallowRef  } from 'vue'
type Obj = {
  name: string
}
const name:Ref<Obj> = shallowRef({name:'你好'})
const btn = () => {
    name.value={name:'不好'}
    console.log(name.value) // 数据改变 视图更新
}

六、triggerRef()

强制更新页面DOM 这样也是可以改变值的

import { Ref,shallowRef,triggerRef   } from 'vue'
type Obj = {
  name: string
}
const name:Ref<Obj> = shallowRef({name:'你好'})
const btn = () => {
    name.value.name='不好'
    console.log(name.value) // 数据改变 视图不更新
    triggerRef(name)   //triggerRef 强制处理
    console.log(name.value)  // 数据改变 视图更新
}

七、customRef()

customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象
一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。

customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set 适合去做防抖之类的

<script setup lang='ts'>
import { customRef    } from 'vue'

function myRef(value:any) {
    let timer:any
    return customRef((track,trigger)=>{
        return {
            get() {
                track()
                return value
            },
            set(newVal) {
                clearTimeout(timer)
                timer = setTimeout(()=>{
                    console.log('触发了set')
                    value=newVal
                    trigger()
                },5000)
            }
        }
    })
}
const name = myRef('你好吗')
const btn = () => {
  name.value = '我很好'
  console.log(name) 
}
</script>