Vue3.0学习 - 第九节，toRef 和 toRefs

爱被打了一巴掌 2023-01-17 14:55 102阅读 0赞

什么是toRef ?

toRef追踪数据，修改响应式数据会影响以前的数据。

> 结论：如果利用ref将某一个对象中的属性变成响应式的数据
> 
> 我们修改响应式的数据时不会影响到原始数据的
> 
>  
> 
>  ref和toRef区别：
> 
>  ref->复制，修改响应式数据不会影响以前的数据
> 
> toRef->引用，修改响应式数据会影响以前的数据
> 
> ref->数据发生改变，界面就会自动更新
> 
> toRef->数据发生改变，界面也不会自动更新
> 
>  
> 
>  toRef应用场景：
> 
> 如果想让响应式数据和以前的数据关联起来，并且更新响应式数据之后还不想更新UI，那么久可以使用toRef

官方文档：

> 可以用来为源响应式对象上的某个 property 新创建一个 [`ref`][ref]。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。
> 
>     const state = reactive({
>       foo: 1,
>       bar: 2
>     })
>     
>     const fooRef = toRef(state, 'foo')
>     
>     fooRef.value++
>     console.log(state.foo) // 2
>     
>     state.foo++
>     console.log(fooRef.value) // 3
> 
>  
> 
> 当您要将 prop 的 ref 传递给复合函数时，`toRef` 很有用：
> 
>     export default {
>       setup(props) {
>         useSomeFeature(toRef(props, 'foo'))
>       }
>     }
> 
> 即使源 property 不存在，`toRef` 也会返回一个可用的 ref。这使得它在使用可选 prop 时特别有用，可选 prop 并不会被 [`toRefs`][toRefs] 处理。

实际操作：

<template>
      <div>
        <p>{
       { state }}</p>
        <button @click="fun">click</button>
      </div>
    </template>
    
    <script>
    import { ref, toRef } from "vue";
    export default {
      setup() {
        let obj = { name: "我是你爹" };
        /**
         * ref(obj.name) -> ref("我是你爹")
         * --> reactive({value:"我是你爹"})
         * ref -> 复制
         */
        // let state = ref(obj.name);
        let state = toRef(obj, "name");
        console.log(state);
    
        function fun() {
          state.value = "叫爸爸";
          /**
           * 结论：如果利用ref将某一个对象中的属性变成响应式的数据
           * 我们修改响应式的数据时不会影响到原始数据的
           *
           *
           * ref和toRef区别：
           * ref->复制，修改响应式数据不会影响以前的数据
           * toRef->引用，修改响应式数据会影响以前的数据
           * ref->数据发生改变，界面就会自动更新
           * toRef->数据发生改变，界面也不会自动更新
           *
           * toRef应用场景：
           * 如果想让响应式数据和以前的数据关联起来，并且更新响应式数据之后还不想更新UI，那么久可以使用toRef
           */
    
          console.log(obj);
          console.log(state);
        }
        return { state, fun };
      },
      methods: {},
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

我们可以看到 数据和原始数据都发生了改变，但是UI界面没有更新

# toRefs #

为了将多个数据都设置监听，或者对整个对象的所有数据发起监听，`vue3` 提供了便利的 API **`toRefs。`**

<template>
      <div>
        <p>{
       { state }}</p>
        
        <button @click="fun">click</button>
      </div>
    </template>
    
    <script>
    import { ref, toRef, toRefs } from "vue";
    export default {
      setup() {
        let obj = { name: "我是你爹", age: 18 };
    
        let name = toRef(obj, "name");
        let age = toRef(obj, "age");
        // toRefs相当于多个oRef(obj, "age");
    
        let state = toRefs(obj);
        function fun() {
          //   name.value = "叫爸爸";
          //   age.value = 666666;
          state.name.value = "sbsbsbsb";
          state.age.value = 6666666;
          console.log(obj);
          console.log(name, age);
          console.log("state", state);
        }
        return { name, age, state, fun };
      },
      methods: {},
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

你会发现 **`toRefs`** 和 **`toRef`** ，都会通过 **`_object`** 引用源数据的值来实现对源数据的追踪。

由于 **`toRef`** 和 **`toRefs`** 都会将目标转化成 `类ref` 对象，所以修改内容的时候需要访问 **`value`** 值。

[ref]: https://v3.cn.vuejs.org/api/refs-api.html#ref
[toRefs]: https://v3.cn.vuejs.org/api/refs-api.html#torefs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221021/f1382ed889c948a0a9a96209e88996bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/acc0183706c64ffa8ca760b39e8d3bef.png