Rumah > hujung hadapan web > View.js > Cara menggunakan toRef dan toRefs dalam Vue3

Cara menggunakan toRef dan toRefs dalam Vue3

WBOY
Lepaskan: 2023-05-11 21:28:04
ke hadapan
1076 orang telah melayarinya

toRef, seperti namanya, bukan data ref responsif Tukarkannya kepada ref responsif data

Mudah difahami:

 <template>
  <h4>姓名:{{ person.name }}</h4>
  <h4>年龄:{{ person.age }}</h4>
  <h4>薪资:{{ person.job.j1.salary }}</h4>
  <button @click="person.name += &#39;!&#39;">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>
 
<script>
import { reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    return {
      person,
    };
  },
};
</script>
 
<style>
</style>
Salin selepas log masuk

Pertama sekali, tiada masalah untuk melaksanakannya. fungsi, dan kemudian pertimbangkan Pengoptimuman kod:

Cara menggunakan toRef dan toRefs dalam Vue3

Kemudian anda mungkin berfikir bahawa apabila saya kembali, ia akan menjadi sedikit menyusahkan,

 return {
      name: person.name,
      age: person.age,
      job: person.job.j1.salary,
    };
Salin selepas log masuk

Walau bagaimanapun, jika anda melakukan ini, anda akan mendapati halaman tersebut tidak responsif Halaman pengubahsuaian data tidak berubah, seperti berikut:

Cara menggunakan toRef dan toRefs dalam Vue3

Seterusnya, lihat penggunaan toRef: It jelas bahawa kesannya dicapai

 <template>
  <h4>姓名:{{ name }}</h4>
  <h4>年龄:{{ age }}</h4>
  <h4>薪资:{{ salary }}</h4>
  <button @click="name += &#39;!&#39;">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="salary++">涨薪</button>
</template>
 
<script>
import { reactive, toRef } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    return {
      name: toRef(person, "name"),
      age: toRef(person, "age"),
      salary: toRef(person.job.j1, "salary"),
    };
  },
};
</script>
 
<style>
</style>
Salin selepas log masuk

Cara menggunakan toRef dan toRefs dalam Vue3

Selepas memperkenalkan penggunaan toRef, mari kita lihat penggunaan toRefs

Cara menggunakan toRef dan toRefs dalam Vue3

Atas ialah kandungan terperinci Cara menggunakan toRef dan toRefs dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:yisu.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan