简要介绍Vue中ref以及相关的工具函数

什么是ref

官方解释：接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性。建议可以多看看文档Vue.js - 渐进式 JavaScript 框架 | Vue.js

 个人理解:使用ref声明的变量，对起进行操作之后值都会被追踪，在用到该数据的地方也会发生相应的变化并且需要使用.value来对数据进行操作，该Api的底层还是使用了Proxy代理来实现，使用get与set方法来重新定义并获取值(但是还不是很明白)

1、如何使用

使用方法：

        1、需要先将ref导入

        2、在定义变量的时候使用ref(值)

  //导入ref
import { ref,type Ref } from "vue";
    // 使用ref
const count:Ref<number> = ref(0);
console.log(count)//拿到值

介绍一些相关的工具函数

        1、isRef

               该工具函数的作用是用来检查一个值是否为ref对象，如果是使用ref来定义的数据就是true不是就是false

  // 2、isRef
    const count:Ref<number> = ref(0);
    const count2:number = 0;
    console.log(isRef(count) ? '使用ref定义的数据' : '没有使用ref定义的数据');//使用ref定义的数据
    console.log(isRef(count) ? '使用ref定义的数据' : '没有使用ref定义的数据');//没有使用ref定义的数据

      2、unRef

                该工具函数 判断传入的参数是否为一个ref对象，是则返回该对象的值，不是则返回参数

它是isRef的语法糖，可以用isRef来实现该工具函数

    2、unRef
    // 1、使用ref
    const count:Ref<number> = ref(0);
    // 不使用ref
    const count2:number = 10;
    //unRef 判断传入的参数是否为一个ref对象，是则返回该对象的值，不是则返回参数
    // 直接使用
    const isNumber = (value:number)=>{
        console.log(unref(value));
    }
    isNumber(count.value);//0
    // 传入一个非ref对象
    isNumber(count2)//10

        unRef使用isRef来实现

     2、unRef
    // 1、使用ref
    const count:Ref<number> = ref(0);
    // 不使用ref
    const count2:number = 10;
    //unRef 判断传入的参数是否为一个ref对象，是则返回该对象的值，不是则返回参数
    // 直接使用
    const isNumber = (val:number)=>{
        //console.log(unref(val));
        //使用isRef来实现unRef
        console.log( isRef(val) ? val.value : val )
    }
    isNumber(count.value);//0
    // 传入一个非ref对象
    isNumber(count2)//10

3、toRef

        该工具函数，是将基于响应式数据的对象中的属性，创建一个对应的ref，且对应的ref与源数据同步

        在使用该方法之前，需要先认识一下reactive，这样更好理解toRef方法

        reactive(数据响应式Api)

                该Api同Ref作用类似都是将数据变成响应式数据，只不过reactive多用来定义对象、数组、Map等类型数据，其中要注意如果将对象直接解构出来，则对应的属性会失去响应式

//定义一个响应式对象
const p1: Info2 = reactive({
  names:'123',
  addres:'123',
  sum:1
})
//解构对象
const {names,addres,sum} = p1;//此时数据已不再具备响应式
function changeSum(){
    p1.sum++;
    console.log(p1.sum,sum)
}
changeSum()

 所以为了解决这样的问题，可以使用toRef工具让响应式对象的属性具备数据响应的功能，创建一个对应的ref。创建出来的ref会跟源属性保持同步：更改了ref的值就会更改源属性的值，反之亦然。

const p1: Info2 = reactive({
  names:'123',
  addres:'123',
  sum:1
})
// 直接解构将不再具备响应式
//const {names,addres,sum} = p1;
const NewSum = toRef(p1,'sum')
// 使用toRef将数据编程响应式数据
const changInfo = () => {
    // p1.sum++;
    p1.sum++;
    console.log('原对象的值'+p1.sum,'使用toRef'+NewSum.value)
}
changInfo()

 由于他们是双向的，改变ref的值也会改变对象的值，在使用的时候还有个问题需要注意，如果数据对象是下面这种

const arr = reactive(ref(0));
//如果要访问arr的值，必须使用.value的方法访问，reactive不会对ref自动解包
console.log(arr[0])//会返回一个ref对象
console.log(arr[0].value)//得到值0

4、toRefs

        该工具函数与toRef类似，根据英语上面s多半代表多个复数(瞎扯的)，toRef会对对象上面的属性创建一个对应的ref，创建出来的ref会跟源属性保持同步，而toRefs会将对象变成一个普通对象，而里面每一个属性则都具备toRef的效果，则现在可以直接对该对象解构，里面的属性也不会丢失响应式。

//toRefs
const Obj = reactive({
    num:1,
    num2:2,
    num3:3,
});
const NewObj = toRefs(Obj);//此时NewObj里面的属性都具备响应式，可直接解构
const {num ,num2,num3} = NewObj;
const changeNum = ()=>{
    num.value++;
    console.log('源对象的值',num.value,'使用toRefs解构的值',num.value)
}

         

以上就是简要介绍了下ref以及相关的工具函数，可能理解或用法上会有误。拿不准的或者觉得不好理解的可以去看看官方文档。