Artikel untuk bercakap tentang ref, toRef, toRefs dalam vue3

Artikel ini akan memberi anda perbincangan mendalam tentang penggunaan ref, toRef dan toRefs dalam projek vue3. Saya harap ia akan membantu semua orang.

1 ref

fungsi ref boleh membungkus jenis data ringkas ke dalam data responsif ( Jenis kompleks ialah. juga tersedia). Harap maklum bahawa apabila memanipulasi nilai dalam JS, anda perlu menambah atribut .value Anda boleh menggunakannya seperti biasa dalam templat.
Contohnya:

• ref membungkus data jenis asas
  App.vue

<template>
  <div>
      <div>{{ name }}</div>
      <button>修改数据</button>
  </div></template><script>
  import { ref } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const name = ref(&#39;初映&#39;)
          const updateName = () => {
              name.value = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

Tulisan yang boleh dilihat dan reaktif () adalah sama, tetapi anda perlu menambah .value tambahan semasa menulis dalam js. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

• ref membungkus data jenis kelas yang kompleks
  Nota: ref juga boleh membalut data kompleks Jenis data ialah data responsif Secara amnya disyorkan untuk menggunakan ref apabila jenis data tidak ditentukan, seperti data yang dikembalikan oleh bahagian belakang.

<template>
    <div>
        <div>{{ data?.name }}</div>
        <button>修改数据</button>
    </div></template><script>
    import { ref } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            // 初始值是 null
            const data = ref(null)
            setTimeout(() => {
                // 右边的对象可能是后端返回的
                data.value = {
                    name: &#39;初映&#39;,
                }
            }, 1000)
            const updateName = () => {
                data.value.name = &#39;CY&#39;
            }
            return { data, updateName }
        },
    }</script>

• Bagaimana untuk memilih?
  ref() dan reactive() ialah dua API reaktif yang disediakan dalam Vue.js3.0.
  ref() digunakan terutamanya untuk mencipta data responsif Ia akan menukar objek JavaScript biasa kepada objek responsif, supaya perubahan dalam data boleh dijejaki oleh contoh Vue Apabila data berubah, paparan Berkaitan Vue dikemas kini secara automatik. Data responsif yang dicipta oleh ref() boleh diakses dan diubah suai melalui atribut .value.
  reactive() digunakan terutamanya untuk mencipta objek reaktif, yang boleh digunakan sebagai objek keadaan yang mengandungi berbilang nilai, dan biasanya digunakan untuk mengurus keadaan kompleks. Ia boleh menukar objek JavaScript biasa kepada objek responsif dan menyokong sifat bersarang Walaupun sifat bersarang berubah, ia akan dijejaki oleh tika Vue. Apabila mana-mana harta dalam objek responsif berubah, Vue akan mengemas kini paparan berkaitan secara automatik.
  Apabila anda tahu dengan jelas bahawa apa yang perlu dibalut adalah objek, adalah disyorkan untuk menggunakan reaktif Dalam kes lain, gunakan ref.
  Selepas Vue3.2, lebih disyorkan untuk menggunakan ref, dan prestasinya telah dipertingkatkan dengan sangat baik.

2. toRef

Peranan fungsi toRef: menukar atribut tertentu dalam objek responsif kepada data responsif yang berasingan, dan Nilai yang ditukar berkaitan dengan yang sebelumnya (fungsi ref juga boleh ditukar, tetapi nilainya tidak berkaitan).
Mula-mula lihat contoh berikut:

<template>
  <div>
      <h2>name: {{ obj.name }} age: {{obj.age}}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { obj, updateName }
      },
  }</script>

Menulis dengan cara ini juga boleh menukar data menjadi data responsif, tetapi ia membawa dua masalah:

• Soalan 1: Obj mesti digunakan dalam templat untuk mendapatkan data, yang menyusahkan.

• Masalah 2: Walaupun hanya nama dan umur digunakan dalam templat, keseluruhan obj dieksport Ini tidak perlu dan membazirkan prestasi.

<template>
  <div>
      <h2>name: {{ name }} </h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive,toRef  } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 18,
              address: &#39;江西&#39;,
              sex: &#39;男&#39;,
          })
          const name = toRef(obj, &#39;name&#39;)
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
          }
          return { name, updateName }
      },
  }</script>

Dengan cara ini, kami boleh meletakkan data yang kami perlukan ke dalam pemulangan, yang menjimatkan prestasi dan penulisan dalam templat, dan sedikit lebih seperti 'import atas permintaan'

3 torefs

Peranan fungsi toRefs: menukar semua sifat dalam objek responsif kepada data responsif yang berasingan dan nilai yang ditukar. adalah sama seperti sebelum ini dikaitkan.

<template>
  <div>
      <h2>{{ name }} {{ age }}</h2>
      <button>修改数据</button>
  </div></template><script>
  import { reactive, toRefs } from &#39;vue&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const obj = reactive({
              name: &#39;初映&#39;,
              age: 10,
          })
          const updateName = () => {
              obj.name = &#39;初映CY的前说&#39;
              obj.age = 18
          }
          return { ...toRefs(obj), updateName }
      },
  }</script>

toRefs mengembalikan semua data responsif kami Kemudian hanya gunakan nama data. oh

Mengikut. Tanpa berlengah lagi, mari kita pelajari cara menggunakan ketiga-tiga kaedah ini dan perbezaannya dengan reaktif.

(Mempelajari perkongsian video: tutorial pengenalan vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Artikel untuk bercakap tentang ref, toRef, toRefs dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!