How to use toRef and toRefs functions in Vue3

ToRef function usage

First of all, the toRef function has two parameters.

toRef (operation object, object attribute)

Okay, next we use the toRef function to write a case. It is still the same as before. The page displays the name and name of a user. age.

<template>
  <div>
    <h2>toRef toRefs 函数</h2>
    <p>姓名：{{boy_toRef}}</p>
    <p>年龄：{{boy.age}}</p>
  </div>
</template>
<script>
  import { toRef } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {   // 创建一个用户对象
        name: &#39;我是????????.&#39;,   // 用户名称
        age: 10    // 用户年龄
      }
      // 使用 toRef 函数包裹，操作 boy 对象的 name 属性
      const boy_toRef = toRef(boy, &#39;name&#39;)  
      console.log(boy_toRef)  // 我们直接打印看一下包裹后的数据格式
      return { boy, boy_toRef }
    }
  }
</script>

Save the code and refresh the page.

We can see the structure of the data. The value is directly the attribute value of the name under boy. So, next we write a button, click the button, and modify this name value.

<template>
  <div>
    <h2>toRef toRefs 函数</h2>
    <p>姓名：{{boy_toRef}}</p>
    <p>年龄：{{boy.age}}</p>
    <el-button type="primary" @click="btn">修改 name</el-button>
  </div>
</template>
<script>
  import { toRef } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      // 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
      const boy_toRef = toRef(boy, &#39;name&#39;)  
      const btn = () => {
        boy_toRef.value = &#39;????????.&#39;  // 把 name 修改成 ????????.
        console.log(boy_toRef)   // 修改完成打印一下结果
      }
      return { boy, btn, boy_toRef }
    }
  }
</script>

Save the code and refresh the page, then click the button to see the page effect.

We can find from the screenshots that the value of boy_toRef has indeed been modified, but the page has not changed, and there is no error on the page.

What is the reason for this? In fact, this is not a bug. As I said at the beginning of this blog post, the toRef function will interact with the source data. Modifying the responsive data will cause the source data to be modified, but its modification will not cause the view layer data to be updated. So, This is what the toRef function does. Indeed, we can see from the screenshot above that there is no data update in the view, but what about the modification of the source data? It doesn't matter, before answering this question, we first have to know what source data is.

Just like the above code:

const boy = {
  name: '我是????????.',
  age: 10
}
const boy_toRef = toRef(boy, 'name')

The toRef function wraps the boy object, so the boy object is the source data.

Therefore, if you want to confirm whether the original data has changed, you need to print the boy object after clicking the button and observe whether it has changed.

<template>
  <div>
    <h2>toRef toRefs 函数</h2>
    <p>姓名：{{boy_toRef}}</p>
    <p>年龄：{{boy.age}}</p>
    <el-button type="primary" @click="btn">修改 name</el-button>
  </div>
</template>
<script>
  import { toRef } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      const boy_toRef = toRef(boy, &#39;name&#39;)  // 这个 boy_toRef 就是被 toRef 函数操作过的 boy 的 name 值
      const btn = () => {
        boy_toRef.value = &#39;????????.&#39;  // 把 name 修改成 ????????.
        console.log(boy_toRef)   // 修改完成打印一下结果
        console.log(boy)   // 修改完成打印一下boy结果
      }
      return { boy, btn, boy_toRef }
    }
  }
</script>

Save the code, refresh the page, click the button to modify the name value, and then check the boy object printed on the console.

It is found that the name value of the boy object has been changed from I am ?????????. to ??????? ???., but the page is still not updated.

remember!

The toRef function will interact with the source data. Modifying the responsive data will cause the source data to be modified, but its modification will not cause the view layer data to be updated.

ref function verification

The ref function can turn the attribute values ​​​​in the object into responsive data. Modifying the responsive data will not affect the source data, but the view The data on the layer will be updated. Is this correct? We didn’t test it in the previous section, so we’ll test it here too.

Let’s still write a case. The page displays a name. Click the button to modify the page name.

<template>
  <div>
    <h2>ref reactive 函数</h2>
    <p>姓名：{{name_ref}}</p>
    <el-button type="primary" @click="btn">修改信息</el-button>
  </div>
</template>
<script>
  import { ref } from &#39;vue&#39;
  export default {
    setup() {
      const name = &#39;我是????????.&#39;
      const name_ref = ref(name)
      const btn = () => {
        name_ref.value = &#39;????????.&#39;
        console.log(name_ref)  // 打印一下被ref包裹的数据
        console.log(name)   // 打印一下源数据
      }
      return { name_ref, btn }
    }
  }
</script>

Save the code, refresh the page, click the button to view the results printed by the page console, mainly to see whether the data wrapped by the ref function has been modified successfully, whether the source data has been modified successfully, and whether the final page has Modification, see screenshot below.

OK, through the screenshot above, everyone understands it!

So remember again!

The ref function can change the attribute value in the object into responsive data. Modifying the responsive data will not affect the source data, but the data on the view layer will be updated

toRefs function

The use of toRefs function is actually similar to the toRef function.

• The toRefs function is used to set multiple data to corresponding data in batches.

• The toRefs function interacts with the original data. Modifying the responsive data will affect the source data, but will not update the view layer.

• The toRefs function can also interact with other responsive data, making it easier to process view layer data.

toRefs function uses the old

method to create an object, then wrap it with the toRefs function and display it on the page.

<template>
  <div>
    <h2>toRef toRefs 函数</h2>
    <p>姓名：{{boy_toRefs.name}}</p>
    <p>年龄：{{boy_toRefs.age}}</p>
  </div>
</template>
<script>
  import { toRefs } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      const boy_toRefs = toRefs(boy)   // 将 boy 用 toRefs 包裹
      console.log(boy_toRefs)   // 打印一下结果
      return { boy_toRefs }
    }
  }
</script>

Save the code and refresh the page to view.

So, let’s modify the code. In addition to .property, we also need .value during rendering.

    <p>姓名：{{boy_toRefs.name.value}}</p>
    <p>年龄：{{boy_toRefs.age.value}}</p>

Modify the view layer code and check the effect.

Hey, it’s normal now!

Some people may wonder, isn't this thing getting more and more complicated? Originally, you could just click on the attribute, but now you have to click on the attribute and value. Isn't it unnecessary to take off your pants and put P on it? Hey hey hey! I think so too.

Why is it normal to say that it is unnecessary, because as mentioned in the previous blog post, we can use the reactive function to process this kind of complex structure data. Rendering can be done by clicking once at most, but the toRefs function requires a few clicks. twice.

<template>
  <div>
    <h2>toRef toRefs 函数</h2>
    <p>姓名：{{boy_toRefs.name}}</p>
    <p>年龄：{{boy_toRefs.age}}</p>
  </div>
</template>
<script>
  import { toRefs, reactive } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      const boy_toRefs = reactive(boy)
      return { boy_toRefs }
    }
  }
</script>

我们不使用 toRefs 函数，而是用之前说的 reactive 函数处理数据。

我们可以看到，页面是可以正常解析的，那为什么我们还有舍近求远的使用 toRefs 函数呢？

其实是有原因的呀！

其实 toRefs 函数最大的用处在这里！

我们这个 boy 对象里面只有两个参数比较少，如果我们这个对象里面有十个参数或者是更多的话，每次展示的时候都得写那么多遍的 boy 点，是不是很麻烦呢？所以说使用 toRefs 函数就可以解决这个问题，看下面的代码。

<template>
  <div>
    <h2>toRef toRefs 函数</h2>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
  </div>
</template>
<script>
  import { toRefs } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      return { boy_toRefs , ...toRefs(boy)}
    }
  }
</script>

在 return 抛出 reactive 的时候，使用扩展运算符和 toRefs 函数，就可以实现直接写属性的方式展示数据了。

但是呢，深层次的对象依旧需要通过点来实现。

也许你还有疑问，直接扩展运算 reactive 函数也行啊，为啥要套上 toRefs 函数，记住一点呀！

toRefs 函数修改，原始数据被改变，页面不会被触发。

看下面代码：

<template>
  <div>
    <h2>toRef toRefs 函数</h2>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
    <el-button type="primary" @click="btn">修改 name</el-button>
  </div>
</template>
<script>
  import { toRefs, reactive } from &#39;vue&#39;
  export default {
    setup() {
      const boy = {
        name: &#39;我是????????.&#39;,
        age: 10
      }
      const new_toRefs = toRefs(boy)

      const btn = () => {
        new_toRefs.name.value = &#39;????????.&#39;
        console.log(boy)
      }

      return { btn, ...toRefs(boy) }
    }
  }
</script>

打印一下结果：

从打印结果中可以看出，原始数据被改变，页面没有被触发。根据我的写法，可以发现，从解构或构建 toRefs 返回的对象，都不会对值的响应性产生影响。

The above is the detailed content of How to use toRef and toRefs functions in Vue3. For more information, please follow other related articles on the PHP Chinese website!