vue3组合式api中的ref、toRef、toRefs三个函数的简单使用示例

最新推荐文章于 2024-03-28 18:25:28 发布
最新推荐文章于 2024-03-28 18:25:28 发布
阅读量6.7k 收藏 8
点赞数 8
分类专栏： vue3.0 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yukinoshita_kino/article/details/116531214
版权

文章目录

一. 场景

在vue2.x项目中使用vue3.x的组合式api （内容有点多…）

1. 安装依赖
npm install @vue/composition-api

2.全局注入 （main.js中）
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);

3.在对应的组件引入需要的功能
import { toRefs, toRef, ref } from "@vue/composition-api";

主要分为两大类分析：

1.1 ref、toRef、toRefs复制的数据为props中的数据

1.2 ref、toRef、toRefs复制的数据为setup中设置的数据

二. 产生条件

在 Vue 组件中，我们将使用组合式 API的位置称为 setup。新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，就作为组合式 API 的入口点。

由于在执行 setup 时，组件实例尚未被创建，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——如本地状态、计算属性或方法。

三. 实际应用
3.1 当响应式数据为props的情况
3.1.1 ref 复制数据
3.1.1.1 ref 第一种情况，ref复制的数据为引用类型时
// 父组件里面
<practice :title="滴滴滴"/>

// 子组件 practice.vue
<template>
  <div>
    <div>练习页面</div>
    <p>原始数据：{{ title }}</p>
    <p>复制数据：{{ data.title }}</p>
    <p @click="checkVal">点击是否页面刷新</p>
  </div>
</template>

<script>
import { toRefs, toRef, ref } from "@vue/composition-api";

export default {
  name: "practiceOne",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const data = ref(props);
    function checkVal() {
      data.value.title = "雪之下";
    }
    return { data, checkVal };
  },
};
</script>

点击前页面：

在这里插入图片描述

点击后页面：红色部分为，警告避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。

在这里插入图片描述

结论：响应式数据为props时，当ref复制的数据为引用类型

① 修改ref复制的数据会修改原始数据

② 修改ref复制的数据页面会实时刷新

3.1.1.2 ref 第二种情况，ref复制的数据为基础类型时
// 父组件里面
<practice :title="滴滴滴"/>

// 子组件 practice.vue
<template>
  <div>
    <div>练习页面</div>
    <p>原始数据：{{ title }}</p>
    <p>复制数据：{{ name }}</p>
    <p @click="checkVal">点击是否页面刷新</p>
  </div>
</template>

<script>
import { toRefs, toRef, ref } from "@vue/composition-api";

export default {
  name: "practiceOne",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const name = ref(props.title);
    function checkVal() {
      name.value = "雪之下";
    }
    return { name, checkVal };
  },
};
</script>

点击前页面：

在这里插入图片描述
点击后页面：

在这里插入图片描述
结论：响应式数据为props时，当ref复制的数据为基础类型

① 修改ref复制的数据不会修改原始数据

② 修改ref复制的数据页面会实时刷新

3.1.2 toRef 复制数据时，注意！一次只能复制props中的一个数据
3.1.2.1 toRef 第一种情况，toRef复制的数据为基础类型时
// 父组件里面
<practice :title="滴滴滴"/>

// 子组件 practice.vue
<template>
  <div>
    <div>练习页面</div>
    <p>原始数据：{{ title }}</p>
    <p>复制数据：{{ name }}</p>
    <p @click="checkVal">点击是否页面刷新</p>
  </div>
</template>

<script>
import { toRefs, toRef, ref } from "@vue/composition-api";

export default {
  name: "practiceOne",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const name = toRef(props, "title");
    function checkVal() {
      name.value = "雪之下";
    }
    return { name, checkVal };
  },
};
</script>

点击前页面：

在这里插入图片描述
点击后页面：红色部分为，警告避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。

在这里插入图片描述
结论：响应式数据为props时，toRef复制的数据为基础类型

① 修改toRef复制的数据会修改原始数据

② 修改toRef复制的数据页面会实时刷新

3.1.2.2 toRef 第二种情况，toRef复制的数据为引用类型时
// 父组件里面
<practice :title="滴滴滴"/>

// 子组件 practice.vue
<template>
  <div>
    <div>练习页面</div>
    <p>原始数据：{{ content.text }}</p>
    <p>复制数据：{{ name.text }}</p>
    <p @click="checkVal">点击是否页面刷新</p>
  </div>
</template>

<script>
import { toRefs, toRef, ref } from "@vue/composition-api";

export default {
  name: "practiceOne",
  props: {
    title: {
      type: String,
      default: "",
    },
    content: {
      type: Object,
      default() {
        return {
          text: "嗒嗒嗒",
        };
      },
    },
  },
  setup(props) {
    const name = toRef(props, "content");
    function checkVal() {
      name.value.text = "雪之下";
    }
    return { name, checkVal };
};
</script>

点击前页面：

在这里插入图片描述
点击后页面：

在这里插入图片描述
结论：响应式数据为props时，toRef复制的数据为引用类型

① 修改toRef复制的数据会修改原始数据

② 修改toRef复制的数据页面会实时刷新

3.1.3 toRefs 复制数据时，一次可以复制props中的一个或多个数据

下面示例：同时复制一个基础类型和一个引用类型

// 父组件里面
<practice :title="滴滴滴"/>

// 子组件 practice.vue
<template>
  <div>
    <div>练习页面</div>
    <p>原始基础数据：{{ title }}</p>
    <p>原始引用数据：{{ content.text }}</p>
    <p @click="checkVal">点击是否页面刷新</p>
  </div>
</template>

<script>
import { toRefs, toRef, ref } from "@vue/composition-api";

export default {
  name: "practiceOne",
  props: {
    title: {
      type: String,
      default: "",
    },
    content: {
      type: Object,
      default() {
        return {
          text: "嗒嗒嗒",
        };
      },
    },
  },
  setup(props) {
    const { title, content } = toRefs(props);
    function checkVal() {
      title.value = "雪之下";
      content.value.text = "比企谷";
    }
    return { checkVal };
  },
};
</script>

点击前页面：

在这里插入图片描述
点击后页面：红色部分为，警告避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。

在这里插入图片描述
结论：响应式数据为props时，toRefs复制的数据不管为引用类型还是基础类型

① 修改toRefs复制的数据都会修改原始数据

② 修改toRefs复制的数据页面都会实时刷新

3.2 当响应式数据为setup中创建的情况
3.2.1 ref 复制数据
3.2.1.1 ref 第一种情况，ref复制的数据为引用类型时
// 父组件里面
<practice :title="滴滴滴"/>

// 子组件 practice.vue
<template>
  <div class="two-three">
    <div>练习页面</div>
    <p>原始数据：{{ personData.name }}</p>
    <p>复制数据：{{ data.name }}</p>
    <p class="pointer" @click="checkVal">点击是否页面刷新</p>
  </div>
</template>

<script>
import { toRefs, toRef, ref } from "@vue/composition-api";

export default {
  name: "practiceTwo",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const personData = {
      name: "滴滴滴",
      age: 16,
    };
    
    const data = ref(personData);
    function checkVal() {
      data.value.name = "雪之下";
    }
    return { personData, data, checkVal };
  },
};
</script>

点击前页面：

在这里插入图片描述
点击后页面：

在这里插入图片描述
结论：响应式数据为setup里面创建时，当ref复制的数据为引用类型

① 修改ref复制的数据会修改原始数据

② 修改ref复制的数据页面会实时刷新

3.2.1.2 ref 第二种情况，ref复制的数据为基础类型时
// 父组件里面
<practice :title="滴滴滴"/>

// 子组件 practice.vue
<template>
  <div class="two-three">
    <div>练习页面</div>
    <p>原始数据：{{ personData.name }}</p>
    <p>复制数据：{{ data }}</p>
    <p class="pointer" @click="checkVal">点击是否页面刷新</p>
  </div>
</template>

<script>
import { toRefs, toRef, ref } from "@vue/composition-api";

export default {
  name: "practiceTwo",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const personData = {
      name: "滴滴滴",
      age: 16,
    };
    
    const data = ref(personData.name);
    function checkVal() {
      data.value = "雪之下";
    }
    return { personData, data, checkVal };
  },
};
</script>

点击前页面：

在这里插入图片描述
点击后页面：

在这里插入图片描述
结论：响应式数据为setup里面创建时，当ref复制的数据为基础类型

① 修改ref复制的数据不会修改原始数据

② 修改ref复制的数据页面会实时刷新

3.2.2 toRef 复制数据时，注意！一次只能复制setup创建的数据中的一个
3.2.2.1 toRef 第一种情况，toRef复制的数据为基础类型时
// 父组件里面
<practice :title="滴滴滴"/>

// 子组件 practice.vue
<template>
  <div class="two-three">
    <div>练习页面</div>
    <p>原始数据：{{ personData.name }}</p>
    <p>复制数据：{{ data }}</p>
    <p class="pointer" @click="checkVal">点击是否页面刷新</p>
  </div>
</template>

<script>
import { toRefs, toRef, ref } from "@vue/composition-api";

export default {
  name: "practiceTwo",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const personData = {
      name: "滴滴滴",
      age: 16,
    };

    const data = toRef(personData, "name");
    function checkVal() {
      data.value = "雪之下";
      console.log(data.value);
    }
    return { personData, data, checkVal };
  },
};
</script>

点击前页面：

在这里插入图片描述
点击后页面：

在这里插入图片描述
响应式数据为setup里面创建时，当toRef复制的数据为基础类型

① 修改toRef复制的数据会修改原始数据

② 修改toRef复制的数据页面不会实时刷新

3.2.2.2 toRef 第二种情况，toRef复制的数据为引用类型时
// 父组件里面
<practice :title="滴滴滴"/>

// 子组件 practice.vue
<template>
  <div class="two-three">
    <div>练习页面</div>
    <p>原始数据：{{ personData.name.text }}</p>
    <p>复制数据：{{ data.text }}</p>
    <p class="pointer" @click="checkVal">点击是否页面刷新</p>
  </div>
</template>

<script>
import { toRefs, toRef, ref } from "@vue/composition-api";

export default {
  name: "practiceTwo",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const personData = {
      name: {
        text: "滴滴滴",
      },
      age: 16,
    };

    const data = toRef(personData, "name");
    function checkVal() {
      data.value.text = "雪之下";
      console.log(data.value.text);
    }
    return { personData, data, checkVal };
  },
};
</script>

点击前页面：

在这里插入图片描述
点击后页面：

在这里插入图片描述
响应式数据为setup里面创建时，当toRef复制的数据为引用类型

① 修改toRef复制的数据会修改原始数据

② 修改toRef复制的数据页面不会实时刷新

3.2.3 toRefs 复制数据时，一次可以复制setup创建的数据中的一个或多个数据

下面示例：同时复制一个基础类型和一个引用类型

// 父组件里面
<practice :title="滴滴滴"/>

// 子组件 practice.vue
<template>
  <div class="two-three">
    <div>练习页面</div>
    <p>原始基础数据：{{ personData.age }}</p>
    <p>原始引用数据：{{ personData.name.text }}</p>
    <p class="pointer" @click="checkVal">点击是否页面刷新</p>
  </div>
</template>

<script>
import { toRefs, toRef, ref } from "@vue/composition-api";

export default {
  name: "practiceTwo",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const personData = {
      name: {
        text: "滴滴滴",
      },
      age: 16,
    };

    const { name, age } = toRefs(personData);
    function checkVal() {
      age.value = 18;
      name.value.text = "雪之下";
      console.log(personData.age);
      console.log(personData.name.text);
    }
    return { personData, name, checkVal };
  },
};
</script>

点击前页面：红色部分，toRefs（）需要一个反应对象，但收到一个普通对象。初步认为toRefs方法只适合props对象

在这里插入图片描述
点击后页面：红色部分，toRefs（）需要一个反应对象，但收到一个普通对象。初步认为toRefs方法只适合props对象

在这里插入图片描述
结论：响应式数据为setup里面创建时，toRefs复制的数据不管为引用类型还是基础类型

① 修改toRefs复制的数据都会修改原始数据

② 修改toRefs复制的数据页面都不会实时刷新

（完）赶时间写出来的，有写错或者写不对的地方还望大家指出来，Thanks♪(･ω･)ﾉ

霜雪遥
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
Vue3新特性之在Composition API中使用CSS Modules
10-15
主要介绍了Vue3新特性之在Composition API中使用CSS Modules,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue.js中ref和$refs的使用及示例讲解
10-16
主要给大家介绍了关于vue.js中ref和$refs使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue之实现单击与双击、同一标签使用click实现单双击操作、不选最后一个子元素的选择器、实现返回上一级功能、根据当前id获取上级id、树形菜单单级展示、pop、not、last
最新发布
“代码农”微信公众号
03-28 1476
vue之实现单击与双击、同一标签使用click实现单双击操作、不选最后一个子元素的选择器、实现返回上一级功能、根据当前id获取上级id、树形菜单单级展示、pop、not、last
Vue 3中toRef和toRefs：更好的解决“prop drilling”问题
weixin_43263566的博客
10-02 674
toRef 与 toRefs （将响应式对象中的某个属性单独提供给外部使用）
Vue3 语法糖的基本使用总结——ref，reactive，toRef，toRefs，props，emit
weixin_51604181的博客
05-01 1189
Vue3 语法糖的基本使用总结 Vue3使用ref，reactive， Vue3使用toRef，toRefs， Vue3使用props，emit
Vue3笔记
Ndbsa的博客
11-19 269
vue3笔记
vue,vue3 新手可能忽略的问题，解构对象丢失响应式，如props，torefs, pinia响应式核心
潜心
10-13 8318
这段时间在利用vue3开发一个项目，在vue的使用过程中，我处于用到什么学什么的状态，一方面是学业，一方面是技术，项目的影响，导致我一直没有静下心来研究透彻vue核心知识，这么，一个关于组件开发时响应式的问题面对了我，我做的是一个组件嵌套，分别有三个组件，一个负责页面框架，一个负责核心业务，一个负责文件处理，这三个组件需要互相通信，我为了代码简洁没有定义过多的变量，而是充分利用vue的组件通信来完成响应式组件和业务。
vue3 toRef 及toRefs 响应式失效( 自上而下 响应式失效 自下而上 可以响应式问题)(待解决)
HHH917的博客
06-06 2043
toRef 及 toRefs 响应式失效问题
Vue toRefs：在Vue中不失去响应式的情况下解构属性
訾博（ZiBo）的博客
08-10 463
在Vue中，响应式是一种让数据变动自动更新到界面的机制。如果一个数据是响应式的，当它变化时，任何依赖于这个数据的部分都会自动更新。
ref、reactive、toRef、toRefs的区别
热门推荐
醉逍遥neo的博客
01-06 3万+
vue3.0里给数据添加响应式有很多api可用，有时傻傻分不清，网上还有很多错误的解读，哎，分享一下个人的理解。 1、reactive reactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。 获取副本原始数据值的时候直接获取，不需要加.value 参数只能传入对象类型 import { reactive } from 'vue' // 响应式状态 const state = reactive({ count: 0 }) // 打印count的值 co
vue3父组件prop子组件的值是异步获取的(toRefs)
weixin_45458830的博客
11-29 611
【代码】vue3父组件prop子组件的值是异步获取的(toRefs)
# Vue3 toRef 和 toRefs 函数.doc
07-11
# Vue3 toRef 和 toRefs 函数.doc
使用vue3+RenderAPI开发的一个飞机大战网页游戏源码.zip
03-03
使用vue3+RenderAPI开发的一个飞机大战网页游戏源码.zip 一、简介： 使用vue3的语法来开发一个小的网页游戏，飞机大战 二、实现原理： 实现了自定义的vue Renderer,渲染使用pixijs 三、目的： 需求驱动学习vue3+...
Vue 3 中的 toRefs：响应式数据的关键函数
07-27
Vue 3 中的 toRefs 在处理响应式数据时非常有用，它允许我们在模板或计算属性中访问响应式对象的属性，并保持属性的响应式特性。同时，结合 ref、reactive 和 toRefs 的使用，我们可以更灵活地管理组件的状态和响应...
Vue3 toRef/toRefs解析与使用
qq_44980680的博客
09-09 2442
Vue3 toRef/toRefs解析与使用
vue3笔记4 toRef
路过君的博客
02-12 494
toRef 获取响应式对象属性的引用 用reactive对象的属性创建ref，可用于以引用形式传递某个属性而非整个对象的场景 例如传递通过props接收的属性 props:['name','age'], setup(props) { doSomething(toRef(props, 'age')) const person = reactive({ firstName: 'zhou', lastName: 'dd', sex: '男' }) return { // 此属性是响应式的，
Vue——vue3中的ref和reactive数据理解以及父子组件之间props传递的数据
测试
09-04 4448
props数据，ref和reactive和ObjectRefImpl和proxy
vue3 响应式之ref、reative、toRef和toRefs
qq_45438471的博客
03-29 961
基于对vue的响应式系统的理解，本文浅谈一下reactive、ref、toRef和toRefs的区别于使用，有错请大神指出！！！
vue新特性
qq_46222031的博客
07-03 1011
setup + ref + reactive 实现了数据响应式，不能使用 ES6 解构，会消除响应特性。所以需要 toRefs 解构，使用时，需要先引入。
torefs toref ref vue3
02-28
torefs 是 Vue 3 中的一个函数，用于将一个响应式对象的所有属性转换为 ref 对象。ref 是 Vue 3 中的一个新的响应式数据类型，它可以将普通的 JavaScript 值转换为响应式数据。通过使用 torefs 函数，我们可以将一个响应式对象的所有属性都转换为 ref 对象，从而实现对每个属性的独立响应式追踪。 在 Vue 3 中，我们可以使用 torefs 函数来处理一些特殊的场景，例如在自定义组合函数中需要将一个响应式对象的所有属性都转换为 ref 对象，或者在使用 Composition API 时需要对一个对象进行解构并将其属性转换为 ref 对象等。 使用 torefs 函数非常简单，只需要将需要转换的响应式对象作为参数传递给 torefs 函数即可。函数会返回一个包含了所有属性都被转换为 ref 对象的新对象。 下面是一个示例代码： ```javascript import { reactive, toRefs } from 'vue'; const state = reactive({ name: 'John', age: 25, gender: 'male' }); const refs = toRefs(state); console.log(refs.name.value); // 输出 'John' console.log(refs.age.value); // 输出 25 console.log(refs.gender.value); // 输出 'male' ``` 在上面的示例中，我们首先使用 reactive 函数将一个普通对象 state 转换为响应式对象。然后，我们使用 toRefs 函数将 state 的所有属性都转换为 ref 对象，并将结果赋值给 refs。最后，我们可以通过访问 refs 对象的属性值来获取响应式数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值