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

一. 场景在vue2.0项目中使用vue3.0的组合式api1. 安装依赖npm install @vue/composition-api2.全局注入（main.js中）import Vue from 'vue';import VueCompositionAPI from '@vue/composition-api';Vue.use(VueCompositionAPI);3.在对应的组件引入需要

霜雪遥

7579人浏览 · 2021-05-08 17:32:51

霜雪遥 · 2021-05-08 17:32:51 发布

文章目录

一. 场景

在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♪(･ω･)ﾉ

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

霜雪遥

@Yukinoshita_kino

已为社区贡献5条内容