Ambil perhatian bahawa gula sintaksis reaktif Vue telah ditamatkan!

Artikel ini membawakan anda situasi terkini tentang Vue terutamanya mengenai sintaks gula dalam Vue. Rakan-rakan yang berminat boleh melihatnya.

Pengenalan

Sejak pengenalan konsep komposisi API, masalah utama yang tidak dapat diselesaikan ialah ref dan reactiveYang mana satu untuk digunakan? reactive mempunyai masalah kehilangan responsif dengan pemusnahan, manakala ref perlu digunakan di mana-mana .value terasa menyusahkan dan mudah terlepas tanpa bantuan sistem jenis. .value

Contohnya, pembilang berikut:

<template>
  <button @click="increment">{{ count }}</button>
</template>

menggunakan

untuk mentakrifkan ref pembolehubah dan count kaedah: increment

let count = ref(0)

function increment() {
  count.value++
}

semasa menggunakan reaktif syntax Sugar, kita boleh menulis kod seperti ini:

let count = $ref(0)

function increment() {
  count++
}

gula sintaks responsif Vue ialah langkah penukaran masa kompilasi dan kaedah
1. ialah $ref()perintah makro masa kompilasi , ia bukan kaedah sebenar yang akan dipanggil semasa runtime, tetapi digunakan sebagai penanda untuk pengkompil Vue untuk menunjukkan bahawa pembolehubah akhir perlu menjadi countpembolehubah reaktif.
Pembolehubah reaktif boleh diakses dan ditetapkan semula seperti pembolehubah biasa, tetapi operasi ini akan menjadi
2. dengan .value selepas penyusunan. Jadi kod dalam contoh di atas juga akan disusun ke dalam sintaks yang ditakrifkan menggunakan ref. ref
Setiap API reaktif yang mengembalikan
3. mempunyai fungsi makro yang sepadan yang diawali dengan ref . Termasuk API berikut: $

ref -> $ref
• dikira ->
• customRef -> $customRef
• toRef -> $toRef
• Anda boleh menggunakan makro
untuk menukar

sedia ada kepada responsif pembolehubah.

4. $()ref
Anda boleh menggunakan makro

untuk menyimpan sebarang rujukan kepada pembolehubah reaktif sebagai rujukan kepada

const a = ref(0)
let count = $(a)
count++
console.log(a.value) // 1

yang sepadan.

5. $$()ref
juga berfungsi dengan

termusnah kerana ia juga pembolehubah reaktif. Pengkompil akan melakukan penukaran dengan cekap melalui

let count = $ref(0)
console.log(isRef($$(count))) // true

:

$$()propsKonfigurasitoRef

Gula sintaks responsif ialah ciri unik kepada

const { count } = defineProps<{ count: number }>()
passAsRef($$(count))

API Komposisi

dan mesti diluluskan Build penggunaan langkah.

Diperlukan, diperlukan , akan digunakan pada fail SFC dan js(x)/ts(x).

1. @vitejs/plugin-vue@>=2.0.0
Perhatikan bahawa

kini merupakan pilihan peringkat teratas bagi pemalam dan tidak lagi terletak dalam

// vite.config.js
export default {
  plugins: [
    vue({
      reactivityTransform: true
    })
  ]
}

kerana ia bukan sahaja berfungsi untuk SFC.

• reactivityTransformJika ia adalah binaan script.refSugar,
diperlukan pada masa ini hanya untuk SFC.

vue-cliJika ia vue-loader@>=17.0.0 +

binaan,

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          reactivityTransform: true
        }
      })
  }
}

diperlukan, pada masa ini hanya berkuat kuasa untuk SFC.

webpackvue-loadervue-loader@>=17.0.0Pilihan, tambah kod berikut pada fail

, jika tidak ralat

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          reactivityTransform: true
        }
      }
    ]
  }
}

akan dilaporkan Walaupun ia tidak menjejaskan penggunaan, ia akan menjejaskan pengalaman pembangunan:

2. tsconfig.jsonTS2304: Cannot find name '$ref'.
Pilihan, tambahkan kod berikut pada fail

, jika tidak, ia akan menggesa

"compilerOptions":{ "types": ["vue/ref-macros"] }

:

3. eslintrc.cjsESLint: '$ref' is not defined.(no-undef)
Apabila gula sintaks responsif didayakan, fungsi Makro ini tersedia secara global dan tidak perlu diimport secara manual. Anda juga boleh memperkenalkan

secara eksplisit dalam fail vue, supaya anda tidak perlu mengkonfigurasi

module.exports = { ...globals: {
    $ref: "readonly",
    $computed: "readonly",
    $shallowRef: "readonly",
    $customRef: "readonly",
    $toRef: "readonly",
  }
};

dan

dalam langkah kedua dan ketiga.
4. vue/macrostsconfig.jsoneslintrcCiri Eksperimen Ditamatkan

import { $ref } from 'vue/macros'

let count = $ref(0)

Gula sintaks responsif pernah menjadi ciri percubaan dan telah ditamatkan, sila baca

Sebab pengabaian

.

• Ia akan dialih keluar daripada teras Vue dalam kemas kini versi kecil akan datang. Jika anda ingin terus menggunakannya, sila gunakan pemalam

  Vue Macros
.

• Sebab ditinggalkan

Anda Yuxi secara peribadi memberikan alamat yang ditinggalkan 2 minggu lalu (21 Februari 2023, 10:05 pagi GMT+8) Sebabnya, diterjemahkan ialah seperti berikut:

Seperti yang anda sedia maklum, kami secara rasmi meninggalkan RFC ini atas persetujuan pasukan.

Sebab

Matlamat asal Transformasi Kereaktifan adalah untuk meningkatkan pengalaman pembangun dengan menyediakan sintaks yang lebih bersih apabila menangani keadaan reaktif. Kami mengeluarkannya sebagai produk percubaan untuk mengumpulkan maklum balas daripada penggunaan dunia sebenar. Walaupun faedah yang dicadangkan ini, kami menemui isu berikut:

• Kehilangan .value menjadikannya lebih sukar untuk mengetahui perkara yang dijejaki dan garisan mana yang mencetuskan kesan reaktif. Masalah ini kurang jelas dalam SFC kecil, tetapi dalam asas kod besar, overhed mental menjadi lebih jelas, terutamanya jika sintaks juga digunakan di luar SFC .

• Disebabkan (1), sesetengah pengguna memilih untuk menggunakan Reactivity Transform dalam SFC sahaja, yang mewujudkan ketidakkonsistenan dan kos penukaran konteks antara model mental yang berbeza. Jadi dilemanya ialah menggunakannya hanya di dalam SFC akan membawa kepada ketidakkonsistenan, tetapi menggunakannya di luar SFC akan menjejaskan kebolehselenggaraan.

• Memandangkan masih terdapat fungsi luaran yang dijangka menggunakan rujukan mentah, penukaran antara pembolehubah reaktif dan rujukan mentah tidak dapat dielakkan. Ini akhirnya menambah lebih banyak kandungan pembelajaran dan beban mental tambahan, yang kami perhatikan lebih mengelirukan untuk pemula daripada API Komposisi biasa.

Paling penting, potensi risiko pemecahan. Walaupun ini adalah ikut serta secara eksplisit, sesetengah pengguna telah menyatakan bantahan keras terhadap cadangan itu kerana kebimbangan bahawa mereka perlu bekerja dengan asas kod yang berbeza di mana sesetengah pengguna telah memilih untuk menggunakannya dan yang lain Tidak. Ini adalah kebimbangan yang sah kerana Transformasi Kereaktifan memerlukan model mental yang berbeza dan memesongkan semantik JavaScript (tugasan pembolehubah boleh mencetuskan kesan reaktif).

Semua perkara yang dipertimbangkan, kami merasakan bahawa menggunakan ciri ini sebagai ciri yang stabil akan menyebabkan lebih banyak masalah daripada faedah dan oleh itu bukan pertukaran yang baik.

Rancangan Migrasi

• Ciri ini sudah disokong sebagai pakej luaran melalui Vue Macros.
• 3.3: Ciri ini akan ditandakan sebagai tidak digunakan lagi. Ia akan terus berfungsi, tetapi anda harus berhijrah ke Vue Macros sementara itu.
• 3.4: Ciri ini akan dialih keluar daripada teras dan tidak akan berfungsi lagi melainkan menggunakan Makro Vue.

Tinggalkan komen

• Walaupun Reactivity Transform akan dialih keluar daripada pakej rasmi, saya rasa ia adalah satu percubaan yang baik.
• Ditulis dengan baik. Saya suka RFC terperinci dan penilaian objektif berdasarkan maklum balas pengguna. Kesimpulan akhir masuk akal. Jangan biarkan yang sempurna menjadi musuh kebaikan.
• Sementara saya menikmati kemudahan ciri ini, saya mendapati isu pemecahan yang berpotensi ini dalam penggunaan sebenar. Mungkin terdapat keengganan untuk mengalih keluar ciri ini dalam keluaran akan datang, tetapi jurutera harus mengambil serius. ?
• Adakah anda mengalih keluar semua ciri atau hanya ciri yang ref.value melakukan penukaran? Bagaimana pula dengan penyahbinaan props responsif, adakah ia di sini untuk kekal?
• Saya telah menggunakannya untuk tapak web e-dagang bersaiz sederhana tanpa sebarang masalah. Saya faham rasional di sebalik mengalih keluarnya, tetapi dalam praktiknya saya mendapati ia merupakan peningkatan yang sangat besar. Jadi soalan saya ialah: apa sekarang?
• Adakah anda mengesyorkan agar orang yang membenci .value kini mengelak daripada menggunakan ref() jika boleh dan menggunakan reactive() seperti sebelum ini?
• .value adalah kerumitan yang diperlukan. Sama seperti perpustakaan reaktif lain xxx.set().
• Sepatutnya mudah untuk membuat pakej yang mengubah semua kod Transformasi Kereaktifan, bukan? Saya juga suka melakukan sesuatu dengan cara yang disyorkan.

• ...

Pembelajaran yang disyorkan: "tutorial video vue.js"

Atas ialah kandungan terperinci Ambil perhatian bahawa gula sintaksis reaktif Vue telah ditamatkan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!