Memahami sistem kereaktifan baru di Vue 3

Salah satu komponen teras rangka kerja front-end moden adalah sistem responsif. Mereka adalah tongkat sihir yang membolehkan aplikasi mencapai interaktiviti, dinamik dan respons yang tinggi. Memahami sistem responsif dan bagaimana untuk menerapkannya dalam amalan adalah kemahiran penting bagi setiap pemaju web.

Sistem responsif adalah mekanisme yang secara automatik menyimpan sumber data (model) dan lapisan perwakilan data (paparan) dalam penyegerakan. Setiap kali model berubah, pandangan itu diberikan semula untuk mencerminkan perubahan ini.

Mari kita ambil editor markdown mudah sebagai contoh. Ia biasanya mempunyai dua panel: satu untuk menulis kod markdown (mengubah model asas), dan yang lain untuk pratonton HTML yang disusun (menunjukkan pandangan yang dikemas kini). Apabila anda menulis kandungan dalam anak tetingkap penulisan, ia segera dan secara automatik dipratonton dalam anak tetingkap pratonton. Sudah tentu, ini hanya satu contoh mudah. Selalunya keadaan lebih rumit.

Dalam banyak kes, data yang ingin kami paparkan bergantung kepada beberapa data lain. Dalam kes ini, kebergantungan dikesan dan data dikemas kini dengan sewajarnya. Sebagai contoh, katakan kita mempunyai harta penuh, yang bergantung pada nama pertama dan sifat terakhir. Apabila sebarang kebergantungan diubahsuai, harta penuh secara automatik dikira semula dan hasilnya dipaparkan dalam pandangan.

Sekarang kita telah menentukan apa responsif, sudah tiba masanya untuk mengetahui bagaimana mekanisme responsif Vue 3 yang baru berfungsi dan bagaimana menggunakannya dalam amalan. Tetapi sebelum kita melakukan ini, kita akan melihat dengan cepat mekanisme responsif lama Vue 2 dan kekurangannya.

mata utama

Vue 3 memperkenalkan sistem responsif yang lebih baik yang menggunakan proksi ES6 dan mencerminkan API untuk fleksibiliti dan fungsi yang dipertingkatkan.

Sistem responsif baru dalam VUE 3 secara automatik menjejaki dan mengemas kini perubahan dalam status aplikasi, menyokong struktur data yang lebih kompleks seperti MAP dan SET.
• Kaedah
,
• , dan
VUE 3 membolehkan pemaju mengawal responsif data lebih berbutir, di mana
• adalah untuk jenis asas dan reactive adalah untuk objek. ref readonly kaedah API responsif lanjutan seperti ref dan reactive menyediakan pemaju dengan alat untuk membuat aplikasi yang lebih dinamik dan responsif dengan berkesan menguruskan kebergantungan dan kesan sampingan.
• Vue 3 menyelesaikan batasan yang terdapat dalam sistem responsif Vue 2, seperti mengesan perubahan pada panjang dan sifat objek yang ditambah. computed watch Walaupun sistem responsif Vue 3 mempunyai kelebihan, ia hanya disokong dalam persekitaran ES6, dan proksi responsif dan objek asal berbeza dalam perbandingan identiti.
secara ringkas meneroka mekanisme responsif Vue 2
Mekanisme responsif dalam Vue 2 lebih kurang "tersembunyi". Kami meletakkan apa -apa ke dalam objek data dan Vue secara tersirat menjadikannya responsif. Di satu pihak, ini memudahkan kerja pemaju, tetapi sebaliknya, ia juga membawa kepada kurang fleksibiliti.

Di sebalik tabir, Vue 2 menggunakan object.defineproperty () untuk menukar semua sifat objek data ke getter dan setter . Bagi setiap contoh komponen, Vue mencipta contoh pemerhati ketergantungan. Sebarang atribut yang dikumpulkan/dikesan sebagai kebergantungan semasa rendering komponen akan direkodkan oleh pemerhati. Kemudian, apabila setter kebergantungan dipecat, pemerhati dimaklumkan bahawa komponen semula-renders dan mengemas kini pandangan. Ini pada dasarnya bagaimana semua sihir berfungsi. Malangnya, terdapat beberapa perkara yang perlu diperhatikan.

langkah berjaga -jaga untuk menukar pengesanan

Vue tidak dapat mengesan perubahan data tertentu kerana batasan objek.defineproperty (). Ini termasuk:

• tambah/keluarkan atribut ke objek (mis. Obj.newkey = value)
• tetapkan item array mengikut indeks (mis. Arr [index] = newValue)
• Ubah suai panjang array (mis. Arr.length = newLength)

bernasib baik, untuk menangani batasan -batasan ini, Vue memberikan kita kaedah API Vue.Set, yang menambah harta kepada objek responsif, memastikan bahawa harta baru juga responsif, mencetuskan kemas kini pandangan.

mari kita meneroka situasi di atas dalam contoh berikut:

<code class="language-javascript"><div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button>Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button>Edit</button>
</li>
  </ul>
  <button>Clear the activities list</button>
</div></code>

<code class="language-javascript">const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Add a new property to an object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
});</code>

Dalam contoh di atas, kita dapat melihat bahawa tiada satu pun dari tiga kaedah ini berfungsi. Kami tidak dapat menambah sifat baru kepada objek orang. Kami tidak boleh menggunakan indeks untuk mengedit item dalam pelbagai aktiviti. Kami juga tidak dapat mengubah suai panjang pelbagai aktiviti.

Sudah tentu, terdapat penyelesaian kepada situasi ini, yang akan kita pelajari dalam contoh seterusnya:

<code class="language-javascript">const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Adding a new property to the object
    addAgeProperty() {
      Vue.set(this.person, 'age', 30)
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        Vue.set(this.activities, index, newValue)
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.splice(0)
    }
  }
});</code>

Dalam contoh ini, kami menggunakan kaedah API Vue.Set untuk menambah harta umur baru kepada objek orang dan memilih/mengubahsuai item tertentu dari array aktiviti. Dalam kes terakhir, kami hanya menggunakan kaedah array splice () yang dibina dalam JavaScript.

seperti yang dapat kita lihat, ini berfungsi, tetapi ia agak canggung dan membawa kepada pangkalan kod yang tidak konsisten. Nasib baik, dalam Vue 3, masalah ini telah diselesaikan. Mari lihat bagaimana ia ajaib dalam contoh berikut:

<code class="language-javascript">const App = {
  data() {
    return {
      person: {
        name: "David"
      },
      activities: [
        "Reading books",
        "Listening music",
        "Watching TV"
      ]
    }
  },
  methods: {
    // 1. Adding a new property to the object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
}

Vue.createApp(App).mount('#app')</code>

Dalam contoh ini menggunakan Vue 3, kami kembali ke fungsi JavaScript terbina dalam yang digunakan dalam contoh pertama, dan kini semua kaedah berfungsi dengan baik.

Dalam Vue 2.6, kaedah API Vue.observable () diperkenalkan. Ia mendedahkan sistem responsif sedikit sebanyak, yang membolehkan pemaju secara jelas membuat objek responsif. Malah, ini adalah kaedah yang sama menggunakan Vue untuk membungkus objek data secara dalaman, dan berguna untuk mewujudkan penyimpanan keadaan komponen silang yang minimum untuk senario mudah. Tetapi sementara ia berguna, pendekatan tunggal ini tidak sepadan dengan keupayaan dan fleksibiliti API responsif yang kaya dan kaya dengan ciri yang dilengkapi dengan VUE 3. Kami akan melihat sebab di bahagian seterusnya.

Nota: Kerana object.defineproperty () hanyalah ciri ES5 dan tidak boleh disimulasikan, Vue 2 tidak menyokong IE8 dan di bawah.

bagaimana mekanisme responsif Vue 3 berfungsi

Sistem responsif dalam Vue 3 telah ditulis semula sepenuhnya untuk memanfaatkan proksi ES6 dan mencerminkan API. Versi baru mendedahkan API responsif yang kaya dengan ciri yang menjadikan sistem lebih fleksibel dan berkuasa daripada sebelumnya.

API Proksi membolehkan pemaju memintas dan mengubahsuai operasi objek peringkat rendah pada objek sasaran. Proksi adalah klon/pembalut objek (dipanggil sasaran ) dan menyediakan fungsi khas (dipanggil perangkap ) yang bertindak balas terhadap operasi tertentu dan menimpa tingkah laku terbina dalam JavaScript objek. Jika anda masih perlu menggunakan tingkah laku lalai, anda boleh menggunakan API refleksi yang sepadan, yang, seperti namanya, mencerminkan kaedah API proksi. Mari kita meneroka contoh untuk melihat bagaimana API ini digunakan dalam Vue 3:

<code class="language-javascript"><div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button>Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button>Edit</button>
</li>
  </ul>
  <button>Clear the activities list</button>
</div></code>

Untuk membuat proksi baru, kami menggunakan pembina proksi baru (sasaran, pengendali). Ia menerima dua parameter: objek sasaran (objek orang) dan objek pengendali, yang mentakrifkan operasi (mendapatkan dan menetapkan operasi) akan dipintas. Dalam objek pengendali, kami menggunakan perangkap GET dan tetapkan untuk menjejaki apabila sifat dibaca dan apabila sifat diubah suai/ditambah. Kami menyediakan kenyataan konsol untuk memastikan kaedah berfungsi dengan betul.

Dapatkan dan tetapkan perangkap Ambil parameter berikut:

• sasaran: Objek sasaran yang dibungkus oleh proksi
• Harta: Nama Harta
• Nilai: Nilai atribut (parameter ini hanya digunakan untuk operasi set)
• penerima: objek di mana operasi dilakukan (biasanya proksi)

mencerminkan kaedah API menerima parameter yang sama sebagai kaedah proksi yang sepadan. Mereka digunakan untuk melaksanakan tingkah laku lalai untuk operasi yang diberikan, kembali nama atribut untuk perangkap mendapatkan, dan kembali benar jika harta ditetapkan, jika tidak, pulangan palsu.

Fungsi

anotasi () dan pencetus () adalah khusus VUE dan digunakan untuk mengesan apabila sifat dibaca dan apabila sifat diubah suai/ditambah. Akibatnya, Vue mengubah kod menggunakan harta ini.

Pada bahagian terakhir contoh, kami menggunakan pernyataan konsol untuk mengeluarkan objek orang asal. Kami kemudian menggunakan pernyataan lain untuk membaca nama atribut objek proksi. Seterusnya, kami mengubah suai harta umur dan membuat harta hobi baru. Akhirnya, kami mengeluarkan objek orang sekali lagi untuk melihat sama ada ia telah dikemas kini dengan betul.

Ini adalah penerangan ringkas tentang mekanisme responsif VUE 3. Sudah tentu, pelaksanaan sebenar adalah lebih kompleks, tetapi diharapkan contoh -contoh yang disediakan di atas cukup untuk mendapatkan idea utama anda.

Apabila menggunakan mekanisme responsif Vue 3, perkara berikut perlu dipertimbangkan:

• Ia hanya tersedia untuk pelayar ES6 yang dibolehkan
• proksi responsif tidak sama dengan objek asal

meneroka vue 3 responsif api

Akhirnya, kita pergi ke API Responsif Vue 3 itu sendiri. Dalam bahagian berikut, kami meneroka pendekatan API yang dikelompokkan secara logik. Saya mengumpulkan kaedah kerana saya fikir lebih mudah untuk diingat untuk hadir dengan cara ini. Mari kita mulakan dengan asas -asas.

Kaedah Asas

Kumpulan pertama termasuk kaedah yang paling asas untuk mengawal respons data:

• REF menerima nilai asas atau objek biasa dan mengembalikan objek REF yang responsif dan mutable. Objek Ref hanya mempunyai satu nilai atribut, yang menunjukkan nilai asas atau objek biasa.
• Reaktif menerima objek dan mengembalikan salinan objek yang responsif. Transformasi mendalam dan mempengaruhi semua sifat bersarang.
• readonly menerima ref atau objek (normal atau responsif) dan mengembalikan objek baca sahaja objek asal. Transformasi mendalam dan mempengaruhi semua sifat bersarang.
• Markraw mengembalikan objek itu sendiri dan menghalangnya daripada ditukar kepada objek proksi.

Marilah kita melihat aplikasi praktikal kaedah ini:

<code class="language-javascript"><div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button>Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button>Edit</button>
</li>
  </ul>
  <button>Clear the activities list</button>
</div></code>

Dalam contoh ini, kita meneroka penggunaan empat kaedah responsif asas.

Pertama, kita membuat objek ref kaunter dengan nilai 0. Kemudian, dalam pandangan, kami meletakkan dua butang, menambah dan mengurangkan nilai kaunter. Apabila kita menggunakan butang ini, kita melihat kaunter itu memang responsif.

Kedua, kami membuat objek responsif seseorang. Kemudian, dalam pandangan, kami meletakkan dua kawalan input yang digunakan untuk mengedit nama dan umur seseorang. Apabila kita mengedit sifat manusia, mereka dikemas kini dengan segera.

Ketiga, kami membuat objek baca sahaja matematik. Kemudian, dalam pandangan, kami menetapkan butang untuk menggandakan nilai harta PI matematik. Tetapi apabila kita mengklik butang, mesej ralat akan dipaparkan di konsol yang memberitahu kita bahawa objek itu hanya dibaca dan kita tidak dapat mengubah suai sifatnya.

Akhirnya, kami membuat objek Alphabetnumbers yang kami tidak mahu menukar kepada proksi dan menandakannya sebagai objek asal. Ia mengandungi semua huruf dan nombor yang sepadan (untuk keringkasan, hanya tiga huruf pertama yang digunakan di sini). Perintah ini tidak mungkin berubah, jadi kami sengaja menyimpan objek ini sebagai objek biasa, yang memberi manfaat kepada prestasi. Kami menjadikan kandungan objek dalam jadual dan menetapkan butang untuk menukar nilai atribut b ke 3. Kami melakukan ini untuk menunjukkan bahawa walaupun objek boleh diubah suai, ini tidak menyebabkan pandangan akan diubah.

Markraw adalah sempurna untuk objek yang kita tidak perlu menjadikannya responsif, seperti senarai panjang kod negara, nama warna dan nombor heksadesimal yang sepadan, dll.

Akhirnya, kami menggunakan kaedah pemeriksaan jenis yang diterangkan dalam bahagian seterusnya untuk menguji dan menentukan jenis setiap objek yang kami buat. Kami menggunakan cangkuk kitaran hayat onmounted () untuk mencetuskan pemeriksaan ini apabila aplikasi pada mulanya diberikan.

Kaedah pemeriksaan jenis

Kumpulan ini mengandungi semua empat jenis pemeriksa yang disebutkan di atas:

ISREF memeriksa sama ada nilai itu adalah objek ref.
pemeriksaan isreaktif sama ada objek itu adalah proksi reaktif yang dicipta oleh reaktif, atau dicipta oleh readonly membungkus proksi lain yang dicipta oleh reaktif.
isreadonly memeriksa sama ada objek itu adalah proksi baca sahaja yang dibuat oleh ReadOnly.
ISProxy menyemak sama ada objek itu adalah proksi yang dibuat oleh reaktif atau readonly.

lebih banyak kaedah ref

Kumpulan ini mengandungi kaedah ref lain:

• Unref Mengembalikan nilai Ref.
• TriggerRef secara manual melakukan apa -apa kesan yang terikat kepada cetek.
• CustomRef mencipta ref tersuai dengan kawalan eksplisit ke atas pengesanan ketergantungan dan kemas kini yang mencetuskan.

Kaedah cetek

Kaedah dalam kumpulan ini adalah kesamaan "cetek" ref, reaktif, dan readonly:

Pencapaian mencipta proksi responsif yang menjejaki hanya sifatnya sendiri dan tidak termasuk objek bersarang.
Proksi baca sahaja yang hanya membuat sifatnya sendiri, tidak termasuk objek bersarang.

mari kita fahami kaedah ini dengan lebih mudah dengan memeriksa contoh -contoh berikut:

<code class="language-javascript"><div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button>Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button>Edit</button>
</li>
  </ul>
  <button>Clear the activities list</button>
</div></code>

Contoh ini bermula dengan membuat objek ref cetek tetapan. Kemudian, dalam pandangan, kami menambah dua kawalan input untuk mengedit sifat lebar dan ketinggian mereka. Tetapi apabila kita cuba mengubah suai mereka, kita melihat bahawa mereka tidak dikemas kini. Untuk menyelesaikan masalah ini, kami menambah butang yang mengubah keseluruhan objek dan semua sifatnya. Sekarang ia berfungsi. Ini kerana kandungan nilai (lebar dan ketinggian sebagai harta tunggal) tidak ditukar kepada objek responsif, tetapi variasi nilai (keseluruhan objek) masih dikesan.

Seterusnya, kami membuat proksi reaktif cetek yang mengandungi sifat lebar dan ketinggian dan objek koordinasi bersarang yang mengandungi sifat x dan y. Kemudian, dalam pandangan, kami menetapkan kawalan input untuk setiap harta. Apabila kita mengubah suai sifat lebar dan ketinggian, kita melihat bahawa ia dikemas kini secara responsif. Tetapi apabila kita cuba mengubah suai sifat X dan Y, kita melihat bahawa mereka tidak dikesan.

Akhirnya, kami membuat settingsb cetek objek bacaan yang mempunyai sifat yang sama seperti settingsa. Di sini, apabila kita cuba mengubah suai atribut lebar atau ketinggian, mesej ralat muncul dalam konsol memberitahu kita bahawa objek itu hanya dibaca dan kita tidak dapat mengubah suai atributnya. Sebaliknya, sifat X dan Y boleh diubah suai tanpa sebarang masalah.

Objek Coords bersarang dari dua contoh terakhir tidak terjejas oleh transformasi dan kekal sebagai objek biasa. Ini bermakna ia boleh diubahsuai dengan bebas, tetapi apa -apa pengubahsuaiannya tidak akan dikesan oleh VUE.

kaedah penukaran

Tiga kaedah seterusnya digunakan untuk menukar proksi kepada ref (s) atau objek biasa:

Toref mencipta ref untuk harta di objek responsif sumber. Ref mengekalkan sambungan responsif kepada sifat sumbernya.
Torefs menukarkan objek responsif ke objek biasa. Setiap harta objek normal adalah ref yang menunjuk kepada harta yang sepadan dengan objek asal.
Toraw Mengembalikan objek normal asal proksi responsif atau baca sahaja.

mari kita lihat bagaimana penukaran ini berfungsi dalam contoh berikut:

<code class="language-javascript">const App = new Vue({
  el: '#app',
  data: {
    person: {
      name: "David"
    },
    activities: [
      "Reading books",
      "Listening music",
      "Watching TV"
    ]
  },
  methods: {
    // 1. Add a new property to an object
    addAgeProperty() {
      this.person.age = 30
    },
    // 2. Setting an array item by index
    editActivity(index) {
      const newValue = prompt('Input a new value')
      if (newValue) {
        this.activities[index] = newValue
      }
    },
    // 3. Modifying the length of the array
    clearActivities() {
      this.activities.length = 0
    }
  }
});</code>

Dalam contoh ini, kita mula -mula membuat objek responsif orang asas yang akan kita gunakan sebagai objek sumber.

Kemudian kita menukar nama harta orang kepada ref dengan nama yang sama. Kemudian, dalam pandangan, kami menambah dua kawalan input -satu untuk nama ref dan satu lagi untuk harta nama orang. Apabila kita mengubah suai salah satu daripada mereka, yang lain juga akan dikemas kini dengan sewajarnya, jadi hubungan responsif di antara mereka dikekalkan.

Seterusnya, kita menukar semua sifat orang ke satu ref yang terkandung dalam objek PeronDetails. Kemudian, dalam pandangan, kami menambah dua kawalan input sekali lagi untuk menguji ref yang kami buat. Seperti yang dapat kita lihat, Zaman PeronDetails sepenuhnya disegerakkan dengan harta umur orang, sama seperti dalam contoh sebelumnya.

Akhirnya, kami menukar objek responsif orang ke objek normal Rawperson. Kemudian, dalam pandangan, kami menambah kawalan input untuk mengedit harta hobi Rawperson. Tetapi seperti yang dapat kita lihat, VUE tidak menjejaki objek yang ditukar.

Kaedah Mengira dan Tonton

Set kaedah terakhir digunakan untuk mengira nilai kompleks dan "memantau" nilai khusus:

• dikira menerima fungsi getter sebagai hujah dan mengembalikan objek REF responsif yang tidak berubah.
• Watcheffect menjalankan fungsi dengan serta -merta dan menjejaki kebergantungannya secara respons, dan mengubahnya apabila kebergantungan berubah.
• Watch adalah sama dengan ini. Ia memantau sumber data tertentu dan menggunakan kesan sampingan dalam fungsi panggil balik apabila sumber yang dipantau berubah.

mari kita pertimbangkan contoh berikut:

<code class="language-javascript"><div id="app">
  <h1>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h1>
  <button>Add "age" property</button>
  <p>Here are my favorite activities:</p>
  <ul>
    <li v-for="(item, index) in activities" :key="index">{{ item }} <button>Edit</button>
</li>
  </ul>
  <button>Clear the activities list</button>
</div></code>

Dalam contoh ini, kami membuat pembolehubah yang dikira penuh yang dikira berdasarkan NameName dan LastName Ref. Kemudian, dalam pandangan, kami menambah dua kawalan input untuk mengedit dua bahagian nama penuh. Seperti yang dapat kita lihat, apabila kita mengubah suai mana -mana bahagian, FullName akan dikira semula dan hasilnya akan dikemas kini.

Seterusnya, kami membuat ref volum dan menetapkan kesan jam tangan untuknya. Setiap kali kelantangan diubahsuai, kesannya akan menjalankan fungsi panggil balik. Untuk membuktikan ini, dalam pandangan, kami menambah butang yang meningkatkan jumlah sebanyak 1. Kami menetapkan syarat dalam fungsi panggil balik untuk menguji sama ada nilai volum boleh dibahagikan dengan 3. Apabila ia kembali benar, mesej amaran akan dipaparkan. Kesan berjalan sekali apabila aplikasi bermula, dan menetapkan nilai kelantangan, dan kemudian berjalan semula setiap kali nilai volum diubahsuai.

Akhirnya, kami membuat ref negeri dan menetapkan fungsi jam tangan untuk menjejaki perubahannya. Sebaik sahaja keadaan berubah, fungsi panggil balik akan dilaksanakan. Dalam contoh ini, kami menambah butang untuk menukar keadaan antara bermain dan dijeda. Setiap kali ini berlaku, mesej amaran dipaparkan.

Watcheffect dan Watch kelihatan sangat serupa dari segi fungsi, tetapi mereka mempunyai beberapa perbezaan yang jelas:

• Watcheffect merawat semua sifat responsif yang terkandung dalam fungsi panggil balik sebagai kebergantungan. Oleh itu, jika panggilan balik mengandungi tiga sifat, semuanya secara tersirat dijejaki untuk perubahan.
• Watch hanya menjejaki sifat yang kita sertakan sebagai parameter dalam panggilan balik. Di samping itu, ia memberikan nilai sebelumnya dan semasa atribut pemantauan.

Seperti yang anda lihat, API Responsif Vue 3 menyediakan pelbagai kaedah yang boleh digunakan dalam pelbagai kes penggunaan. API sangat besar, dan dalam tutorial ini, saya hanya meneroka asas -asas. Untuk penerokaan, butiran, dan kes kelebihan yang lebih mendalam, lawati dokumentasi API yang responsif.

Kesimpulan

Dalam artikel ini, kami memperkenalkan sistem responsif dan bagaimana ia dapat dilaksanakan di Vue 2 dan Vue 3. Kami melihat bahawa Vue 2 mempunyai beberapa kekurangan yang berjaya diselesaikan dalam Vue 3. Mekanisme responsif Vue 3 adalah penulisan semula lengkap berdasarkan keupayaan JavaScript moden. Mari kita meringkaskan kebaikan dan keburukannya.

Pro:

Ia boleh digunakan sebagai pakej mandiri. Sebagai contoh, anda boleh menggunakannya dengan React.
Ia menyediakan fleksibiliti dan fungsi yang lebih besar terima kasih kepada API yang kaya dengan ciri-cirinya.
Ia menyokong lebih banyak struktur data (peta, lemah, set, lemah).
ia berfungsi lebih baik. Hanya data yang diperlukan menjadi responsif.
Pertimbangan operasi data dalam VUE 2 telah diselesaikan.

Kekurangan:

Ia hanya tersedia untuk pelayar ES6 yang dibolehkan.
Dari segi perbandingan identiti (===), proksi responsif tidak sama dengan objek asal.
Ia memerlukan lebih banyak kod daripada mekanisme responsif "automatik" Vue 2.

Intinya ialah mekanisme responsif VUE 3 adalah sistem yang fleksibel dan berkuasa yang boleh digunakan oleh pemaju VUE dan bukan VUE. Tidak kira apa keadaan anda, ambil hanya dan mula membina sesuatu yang luar biasa.

VUE 3 SISTA SISTEM Responsif (FAQ)

Apakah sistem responsif Vue 3?

sistem responsif Vue 3 adalah aspek asas Vue.js, rangka kerja JavaScript yang popular. Ia bertanggungjawab untuk menjejaki perubahan dalam keadaan aplikasi dan mengemas kini DOM (Model Objek Dokumen) untuk mencerminkan perubahan ini. Sistem ini dibina di sekitar konsep "objek responsif". Apabila sifat objek ini berubah, VUE secara automatik akan mencetuskan kemas kini yang diperlukan. Ini memudahkan pemaju untuk membina aplikasi web yang dinamik dan responsif.

Bagaimana sistem responsif Vue 3 berbeza dari Vue 2?

sistem responsif Vue 3 telah ditulis semula sepenuhnya menggunakan objek proksi JavaScript, menyediakan cara yang lebih efisien dan berkuasa untuk mengesan perubahan berbanding dengan objek Vue 2. Sistem baru ini membolehkan VUE untuk mengesan perubahan dalam sifat bersarang, batasan VUE 2. Ia juga mengurangkan jejak memori dan meningkatkan prestasi.

Bagaimana menggunakan sistem responsif Vue 3 dalam aplikasi saya?

Untuk menggunakan sistem responsif VUE 3, anda perlu membungkus data anda menggunakan fungsi reaktif (). Fungsi ini menjadikan objek dan sifatnya responsif. Apabila harta berubah, VUE akan secara automatik membuat komponen yang bergantung kepadanya. Anda juga boleh menggunakan fungsi ref () untuk membuat satu responsif berubah.

Apakah peranan fungsi ref dalam mekanisme responsif Vue 3?

Fungsi ref () dalam

vue 3 digunakan untuk membuat rujukan responsif kepada nilai. Ia membungkus nilai dalam objek dengan harta tunggal ".value" dan menjadikan objek ini responsif. Ini bermakna apabila nilai berubah, sebarang komponen menggunakan ref ini akan dikemas kini.

Apakah perbezaan antara reaktif dan ref di Vue 3?

Reaktif () dan Ref () kedua -duanya digunakan untuk membuat data responsif dalam Vue 3, tetapi ia digunakan dalam senario yang berbeza. Fungsi reaktif () digunakan untuk membuat objek responsif, manakala fungsi ref () digunakan untuk membuat nilai asas seperti rentetan atau nombor responsif. Walau bagaimanapun, ref () juga boleh digunakan dengan objek, di mana ia bertindak sama dengan reaktif ().

vue 3 Bagaimana menangani respons respons array?

vue 3 Responsiveness of arrays adalah sama seperti yang mengendalikan objek. Jika anda menggunakan fungsi reaktif () untuk membuat array responsif, Vue menjejaki perubahan kepada unsur -unsur array dan panjangnya. Ini bermakna jika anda menambah, memadam, atau menggantikan elemen, Vue akan mengemas kini komponen yang bergantung pada array itu.

Apakah fungsi Torefs dalam mekanisme responsif?

Fungsi Torefs () dalam Vue 3 digunakan untuk menukar objek responsif ke objek biasa, di mana setiap harta objek asal diwakili sebagai ref. Ini berguna apabila anda ingin membongkar objek responsif tetapi masih menyimpannya responsif.

Bagaimana untuk mencegah objek dalam Vue 3 daripada responsif?

anda boleh menggunakan fungsi seterar () untuk mengelakkan objek daripada responsif. Ini berguna dalam beberapa kes di mana anda tidak mahu Vue mengesan perubahan pada objek.

vue 3 Apakah fungsi yang dikira dalam mekanisme responsif?

Fungsi yang dikira () dalam VUE 3 digunakan untuk mewujudkan harta responsif yang bergantung kepada sifat responsif yang lain. Nilai harta yang dikira dikemas kini secara automatik apabila sebarang kebergantungan berubah. Ini sangat berguna untuk pengiraan atau transformasi yang perlu dikemas kini apabila perubahan data yang mendasari.

vue 3 Bagaimana menangani respons respons dan ditetapkan?

sistem responsif Vue 3 sepenuhnya menyokong peta JavaScript dan menetapkan struktur data. Jika anda membuat peta atau menetapkan responsif, VUE menjejaki perubahan kepada penyertaan atau elemennya. Ini bermakna jika anda menambah, memadam, atau menggantikan entri atau elemen, Vue akan mengemas kini komponen yang bergantung pada peta atau set.

Atas ialah kandungan terperinci Memahami sistem kereaktifan baru di Vue 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!