Vue3快速入门-toRef

查看本系列文章合集click me

下载本系列文章源码click me

作用： 为原响应式对象上的某个属性创建一个 ref 对象, 二者内部操作的是同一个数据值, 更新时二者是同步的

语法： const xxx = toRef(响应式对象, "对象属性");

• 和ref区别：
  • ref拷贝了一份新的数据值单独操作, 更新时相互不影响
  • toRef引用原响应对象数据，更新时二者是同步的

应用: 使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。

toRefFather.vue

<template>
  <h2>Father</h2>
  <p>user: {{ user }}</p>
  <p>nameToRef: {{ nameToRef }}</p>
  <p>nameRef: {{ nameRef }}</p>

  <button @click="update">更新</button>

  <Child :name="nameToRef" />
</template>

<script lang="ts">
import { reactive, toRef, ref } from "vue";
import Child from "../components/toRefChild.vue";

export default {
  setup() {

    const user = reactive({
      name: '温情key',
      age: 22,
    });

    const nameToRef = toRef(user, "name");
    const nameRef = ref(user.name);

    const update = () => {
      user.name = user.name + 'y';
      // nameToRef.value = nameToRef.value + 'y';
      nameRef.value = 'ref拷贝一份新数据，不影响原对象数据';
    };

    return {
      user,
      nameToRef,
      nameRef,
      update,
    };
  },

  components: {
    Child,
  },
};
</script>

toRefChild.vue

<template>
  <h2>Child</h2>
  <h3>nameToRef: {{ name }}</h3>
</template>

<script lang="ts">
import { computed, defineComponent, Ref, toRef } from "vue";

const component = defineComponent({
  props: {
    name: {
      type: String,
      require: true,
    },
  },

  setup(props, context) {
   
    return {
      
    };
  },
});

export default component;
</script>

初始化：

更新后：