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>

           

初始化：

更新後：