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

二. 产生条件

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