toRef、toRefs

toRef

可以用来为源响应式对象上的 property 性创建一个 ref，其返回的值与源对象保持着响应式链接

语法

(alias) toRef<object, never>(object: object, key: never): never

toRef(object: object, key: never): never

toRef三种情况

• toRef普通对象

<template>
  <div>obj:{{obj}}</div>
  <div>toRefObj:{{reactiveObj}}</div>
  <div><button @click="addObj"> 修改obj</button></div>
  <div><button @click="addRef"> 修改toRefObj</button></div>
</template>

<script lang="ts">
import { reactive, ref, toRef, toRefs } from '@vue/reactivity'
import { defineComponent } from '@vue/runtime-core'
export default defineComponent({
  name: 'App',
  setup(){
    let obj = {value:0}
    let toRefObj = toRef<{value: number;}, "value">(obj,'value')
    
    let addObj = ():void=>{
      obj.value += 1
      console.log(obj);
      console.log(toRefObj);
    }
    let addRef = ():void=>{
      toRefObj.value += 1
      console.log(obj);
      console.log(toRefObj);
    }
    
    return {
      obj,
      toRefObj,
      addObj,
      addRef
    }
  }
})
</script>

可以看到，toRef还是返回的是对象，与原对象引用地址一样，因此修改toRef对象和原对象都会互相影响，但是视图确不会更新，因为他们不是响应式的对象。

• toRef(reactive对象)

<template>
  <div>reactiveobj:{{reactiveobj}}</div>
  <div>toRefObj:{{toRefObj}}</div>
  <div><button @click="addObj"> 修改reactiveobj</button></div>
  <div><button @click="addRef"> 修改toRefObj</button></div>
</template>

<script lang="ts">
import { reactive, ref, toRef, toRefs } from '@vue/reactivity'
import { defineComponent } from '@vue/runtime-core'
export default defineComponent({
  name: 'App',
  setup(){
    let reactiveobj = reactive<{value: number}>({value:0})
    let toRefObj = toRef<{value: number;}, "value">(reactiveobj,'value')
    let addObj = ():void=>{
      reactiveobj.value += 1
      console.log(reactiveobj);
      console.log(toRefObj);
    }
    let addRef = ():void=>{
      toRefObj.value += 1
      console.log(reactiveobj);
      console.log(toRefObj);
    }
    
    return {
      reactiveobj,
      toRefObj,
      addObj,
      addRef
    }
  }
})
</script>

• toRef(ref对象)

<template>
  <div>refObj:{{ refObj }}</div>
  <div>toRefObj:{{ toRefObj }}</div>
  <div><button @click="addObj">修改refObj</button></div>
  <div><button @click="addRef">修改toRefObj</button></div>
</template>

<script lang="ts">
import { reactive, ref, toRef, toRefs } from "@vue/reactivity";
import { defineComponent } from "@vue/runtime-core";
export default defineComponent({
  name: "App",
  setup() {
    let refObj = ref<{count: number}>({ count: 0 });
    console.log(refObj);
    let toRefObj = toRef<{ value: {count: number} }, "value">(refObj, "value");
    console.log(toRefObj);
    let addObj = (): void => {
      refObj.value.count += 1;
      console.log(refObj);
      console.log(toRefObj);
    };
    let addRef = (): void => {
      toRefObj.value.count += 1;
      console.log(refObj);
      console.log(toRefObj);
    };
    return {
      refObj,
      toRefObj,
      addObj,
      addRef,
    };
  },
});
</script>

toRefs

toRefs就是在toRef的基础上，将响应式对象的每个属性都转化为Ref对象，修改每个Ref对象就需要去修改其.value，然后用展开运算符就能始终不失去响应式

语法

(alias) toRefs<object>(object: object): object

toRefs(object: object): object

<template>
  <div>reactiveobj:{{reactiveobj}}</div>
  <div>toRefObj:{{toRefObj}}</div>
  <div>toRefcount:{{count}}</div>
  <div>toRefcount1:{{count1}}</div>
  <div><button @click="addObj">修改reactiveobj</button></div>
  <div><button @click="addRef">修改toRefObj</button></div>
</template>

<script lang="ts">
import { reactive, ref, toRef, toRefs } from '@vue/reactivity'
import { defineComponent } from '@vue/runtime-core'
export default defineComponent({
  name: 'App',
  setup(){
    let reactiveobj = reactive<{count: number,count1:number}>({count:0,count1:2})
    
    let toRefObj = toRefs<{
      count: number;
      count1: number;
    }>(reactiveobj)

    console.log(toRefObj);

    let addObj = ():void=>{
      reactiveobj.count += 1
      reactiveobj.count1 += 2
      console.log(reactiveobj);
      console.log(toRefObj);
    }
    let addRef = ():void=>{
      toRefObj.count.value += 1
      toRefObj.count1.value += 2
      console.log(reactiveobj);
      console.log(toRefObj);
    }
    
    return {
      reactiveobj,
      toRefObj,
      ...toRefObj,
      addObj,
      addRef
    }
  }
})
</script>