其他分享
首页 > 其他分享> > # Vue3 toRef 和 toRefs 函数

# Vue3 toRef 和 toRefs 函数

作者:互联网

Vue3 toRef 和 toRefs 函数

上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。

toRef 函数

通过上一篇博客,我们知道,ref 函数可以创建一个响应式的数据,那 toRef 函数同样也是创建一个响应式的数据,那么他们之间的区别是什么呢?

首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数据的交互。什么意思呢?就是 ref 函数可以将对象里面的属性值变成响应式的数据,修改响应式数据,是不会影响到源数据,但是视图层上的数据会被更新。但是 toRefs 函数的本质是引用,也就是说,toRef 函数会与源数据交互,修改响应式数据会造成源数据的修改,但是他的修改不会造成视图层数据的更新。

上面这段话理解吗?不理解的话没关系,下面通过几个案例就可以明白了。

toRef 函数使用

首先呢, toRef 函数有两个参数。

toRef(操作对象, 对象属性)

好,接下来我们使用 toRef 函数写一个案例,还是和以前一样,页面展示一个用户的名称和年纪。

<template>
  <div>
    <h1>toRef toRefs 函数</h1>
    <p>姓名:{{boy_toRef}}</p>
    <p>年龄:{{boy.age}}</p>
  </div>
</template>
<script>
  import { toRef } from 'vue'
  export default {
    setup() {
      const boy = {   // 创建一个用户对象
        name: '我是

标签:boy,name,toRefs,toRef,Vue3,数据,函数
来源: https://www.cnblogs.com/wjw1014/p/16444682.html