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

最新推荐文章于 2024-06-20 09:54:38 发布
最新推荐文章于 2024-06-20 09:54:38 发布
阅读量7.1k 收藏 8
点赞数 8
分类专栏： vue3.0 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yukinoshita_kino/article/details/116531214
版权
本文详细探讨了在Vue3.x中，如何使用ref、toRef和toRefs处理props和setup中的响应式数据。通过多个示例展示了不同情况下，这三种方式对基础类型和引用类型数据的复制及修改效果，揭示了它们在数据修改和页面更新上的行为差异。
摘要由CSDN通过智能技术生成

文章目录

一. 场景

在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.0组合式api使用总结
08-04
Vue3.0作为一款现代化的前端框架，引入了许多新特性以提升开发效率和代码可维护性，其中最重要的改进之一就是组合式API。这篇总结将详细阐述Vue3.0中的组合式API，帮助开发者理解并掌握这些关键概念。 1. **setup...
Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip
08-17
Vue 3 中引入了`ref`和`reactive`两个核心响应式API。`ref`用于创建一个响应式引用，可以直接修改其值，而`reactive`则可以将整个对象转换为响应式的。 3. **模板语法改进**： 虽然Vue 3仍然支持Vue 2的模板语法...
props的几种写法——defineProps定义props、toRefs接收props、computed中get和set写法、watch深度监听immediate-true
weixin_44867717的博客
05-15 929
script>//写法一Reply},data() {return{replys:''},methods: {//写法二props: {id: {},},width: {},data() {return{replys:''},methods: {</script>
【Vue3】组合式API—ref，reactive
zhaochen1127的博客
04-06 903
博主简介🛌某神秘组织成员前端小白，前端优质创作者，阿里云博主，一个开朗的网友有一个名为山鱼社区的社区，收录许多优秀博主的创作内容创作不易希望能得到您的支持，您的支持是我创作的动力✌。
Vue3中的常见组件通信之`$refs`、`$parent`
最新发布
qq_38210427的博客
06-20 446
Vue3中的常见组件通信之`$refs`、`$parent`-CSDN博客
Vue3 组合式api 使用标签上的ref
晨昱的博客
08-03 450
Element Plus 的表单校验没有提供组合式api的写法，所以我只能。。。 <!-- 子组件 --> <address ref="rule"></address> setup(){ const rule:Ref = ref(null); const fun:Function = ():void=>{ //submit 是子组件的方法 rule.value.submit(); }; return{ rule };
Vue3的组合式API中如何使用ref()函数?
2301_77795034的博客
06-22 916
在这个例子中，我们使用了ref()函数创建了一个名为message的响应式变量，并在组件的setup函数中进行了定义。在Vue3的组合式API中，使用ref()函数创建响应式变量、数组、对象等，可以在组件的setup函数中完成，然后返回给模板使用。在组件的setup函数中，使用ref函数创建响应式变量，并使用它来初始化一个变量，然后在模板中使用这个变量。在组件的setup函数中，使用ref函数创建响应式变量，并使用它来初始化一个数组，然后在模板中使用v-for指令遍历这个数组。接下来，我们来看几个例子吧！
组合API---ref函数
imkaifan的博客
12-09 805
组合API---ref函数
vue3 组合式API --- ref()
weixin_64462471的博客
05-03 138
的 ref 对象，只有一个指向其内部值的属性。如果一个对象赋值给 ref，会被。[shallow 浅] 来替代。
Vue3中Componsition-API开发模式，学习完整代码
11-10
在Vue3的Componsition API中，我们可以利用`setup()`函数来组织组件逻辑，使用`ref`和`reactive`来创建响应式数据，使用`computed`和`watch`的组合式API来实现计算属性和监听器。此外，`provide`和`inject`允许父...
Vue3-demo 示例代码
10-08
Vue3 允许在模板中使用 `Fragment`，这意味着组件可以返回多个根元素。`Portal` 组件则允许将内容渲染到文档的其他部分，增强了布局灵活性。 9. **Global API 变化**： Vue3 的全局 API 有所调整，例如 `$on`, `$...
vue3+vite创建项目-（傻瓜式教程）
01-19
Vue.js 是一个流行的前端框架，它的最新版本Vue3引入了许多新特性，如Composition API、Suspense、Teleport等，提供了更好的性能和更灵活的开发体验。Vite是由Vue.js作者尤雨溪开发的一款现代化的前端构建工具，它...
组合API---toRefs函数、toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的
imkaifan的博客
12-09 724
组合API---toRefs函数、toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的
Vue3/ Vue3组合式API(reactive 函数) 、 Vue3组合式API(ref 函数)
m0_64494670的博客
01-06 970
Vue3/ Vue3组合式API(reactive 函数) 、 Vue3组合式API(ref 函数)
Vue3：组合API-toRefs函数
m0_58875280的博客
09-18 196
朋友们晚上好呀,讲toRefs函数。
Vue3笔记 - ref函数
xiaoxiannvh的博客
12-20 2223
3.ref函数 作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div> 备注： 接收的数据可以是：基本类型、也可以是对象类型。 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。 对象类型的数据
Vue3.x 组合试api ref响应式引用 笔记
飞扬小阁
11-09 668
https://www.vue3js.cn/docs/zh/guide/composition-api-introduction.html#%E5%B8%A6-ref-%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8F%98%E9%87%8F 示例：根据用户查找内容 2.x 3.X 使用setup 新的setup组件选项在创建组件之前执行，一旦props被解析，并充当合成 API 的入口点。 setup选项应该是一个接受props和contex...
【手写vue3组合式API：shallowRef和ref】
aniudunaichiji的博客
07-19 237
手写vue3组合式API：shallowRef和ref
Vue3笔记_02(组合式API)toRef
qq_43260366的博客
11-28 408
但是呢有的数据使用比较频繁，比如 name(简单数据类型),soninfo(引用数据类型);后端返回的数据是一个嵌套式数据(info)，这些数据都需要在页面上进行渲染、修改;->将其定义为一个响应式数据return出去；当 点击“点我修改info.name”按钮时 页面内容无变化(即使数据已经改变了)；页面内容能正常渲染；如果想要简单数据类型赋值应该怎样才能获取一个响应式数据呢？类型的属性单独提供给外部使用时就使用toRef;导入中的例子使用toRef就可以实现了。当要将响应式对象中的某个值为。
vue3中toref和torefs用法
03-21
在Vue 3中，`toRef`和`toRefs`是个非常有用的函数，用于在组合式API中处理响应式数据。 首先，让我们来介绍一下`toRef`函数。`toRef`函数接收两个参数：一个响应式对象和一个属性名。它的作用是创建一个指向响应式对象某个属性的ref对象。这意味着当该属性的值发生变化时，ref对象也会相应地更新。 下面是一个示例代码： ```javascript import { reactive, toRef } from 'vue'; const state = reactive({ name: 'John', age: 25, }); const nameRef = toRef(state, 'name'); console.log(nameRef.value); // 输出：John state.name = 'Alice'; console.log(nameRef.value); // 输出：Alice ``` 在上面的代码中，我们使用`toRef`函数创建了一个指向`state`对象中`name`属性的ref对象`nameRef`。当`state.name`的值发生变化时，`nameRef.value`也会相应地更新。 接下来，让我们来介绍一下`toRefs`函数。`toRefs`函数接收一个响应式对象作为参数，并返回一个包含该对象所有属性的普通对象，其中每个属性都是一个ref对象。 下面是一个示例代码： ```javascript import { reactive, toRefs } from 'vue'; const state = reactive({ name: 'John', age: 25, }); const refs = toRefs(state); console.log(refs.name.value); // 输出：John console.log(refs.age.value); // 输出：25 state.name = 'Alice'; console.log(refs.name.value); // 输出：Alice ``` 在上面的代码中，我们使用`toRefs`函数将`state`对象转换为一个包含所有属性的普通对象`refs`。通过`refs.name.value`和`refs.age.value`，我们可以访问到对应属性的值，并且当属性的值发生变化时，ref对象也会相应地更新。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值