Saya baru -baru ini mempunyai peluang untuk mencuba API Komposisi Vue baru dalam projek sebenar untuk memeriksa di mana ia mungkin berguna dan bagaimana kita boleh menggunakannya pada masa akan datang.

Sehingga kini, ketika kami membuat komponen baru kami menggunakan API Pilihan. API itu memaksa kita untuk memisahkan kod komponen dengan pilihan, yang bermaksud bahawa kita perlu mempunyai semua data reaktif di satu tempat (data), semua sifat yang dikira di satu tempat (dikira), semua kaedah dalam satu tempat (kaedah), dan sebagainya.

Kerana ia berguna dan boleh dibaca untuk komponen yang lebih kecil, ia menjadi menyakitkan apabila komponen menjadi lebih rumit dan berurusan dengan pelbagai fungsi. Biasanya, logik yang berkaitan dengan satu fungsi tertentu mengandungi beberapa data reaktif, harta yang dikira, kaedah atau beberapa daripada mereka; Kadang -kadang ia juga melibatkan menggunakan cangkuk kitaran hayat komponen. Ini menjadikan anda sentiasa melompat antara pilihan yang berbeza dalam kod apabila bekerja pada satu kebimbangan logik tunggal.

Isu lain yang mungkin anda hadapi ketika bekerja dengan Vue adalah bagaimana untuk mengekstrak logik umum yang boleh digunakan semula oleh pelbagai komponen. Vue sudah mempunyai beberapa pilihan untuk melakukannya, tetapi mereka semua mempunyai kelemahan mereka sendiri (misalnya campuran, dan slot scoped).

API Komposisi membawa cara baru untuk membuat komponen, memisahkan kod dan mengeluarkan kod yang boleh diguna semula.

Mari kita mulakan dengan komposisi kod dalam komponen.

Komposisi kod

Bayangkan anda mempunyai komponen utama yang menetapkan beberapa perkara untuk aplikasi seluruh Vue anda (seperti susun atur di NUXT). Ia berkaitan dengan perkara -perkara berikut:

• menetapkan locale
• Memeriksa jika pengguna masih disahkan dan mengalihkannya jika tidak
• Mencegah pengguna daripada memuatkan semula aplikasinya
• Mengesan aktiviti pengguna dan bertindak balas apabila pengguna tidak aktif untuk tempoh masa tertentu
• Mendengarkan acara menggunakan EventBus (atau acara objek tetingkap)

Mereka hanya beberapa perkara yang boleh dilakukan oleh komponen. Anda mungkin boleh membayangkan komponen yang lebih kompleks, tetapi ini akan menjadi tujuan contoh ini. Demi kebolehbacaan, saya hanya menggunakan nama alat peraga tanpa pelaksanaan sebenar.

Ini adalah bagaimana komponen akan kelihatan seperti menggunakan API Pilihan:

 <pemat>
  <dana>
    …
  


<script>
Eksport Lalai {
  Nama: &#39;App&#39;,

  data () {
    kembali {
      UserActivityTimeout: null,
      lastuseractivityat: null,
      ReloadCount: 0
    }
  },

  dikira: {
    isAuthenticated () {...}
    locale () {...}
  },

  Tonton: {
    locale (nilai) {...},
    isAuthenticated (nilai) {...}
  },

  async dicipta () {
    const initiLocale = localStorage.getItem (&#39;locale&#39;)
    Tunggu ini.LoadLocaleasync (InitiLocale)
  },

  dipasang () {
    EventBus. $ On (my_event, this.handlemyEvent)

    this.setReloadCount ()
    this.blockreload ()

    this.ActivateActivityTracker ()
    this.ResetActivityTimeout ()
  },

  boredestroy () {
    this.deactivateActivityTracker ()
    ClearTimeout (this.useractivityTimeout)
    EventBus. $ OFF (my_event, this.handlemyEvent)
  },

  Kaedah: {
    ActivateActivityTracker () {...},
    blockReload () {...},
    DeactivateActivityTracker () {...},
    HandLemyEvent () {...},
    Async LoadLocaleasync (SelectedLocale) {...}
    redirectUser () {...}
    resetActivityTimeout () {...},
    seti18nlocale (locale) {...},
    setReloadCount () {...},
    userActivityThrottler () {...},
  }
}
</script></dana></pemat>

Seperti yang anda lihat, setiap pilihan mengandungi bahagian dari semua fungsi. Tidak ada pemisahan yang jelas di antara mereka dan yang menjadikan kod itu sukar dibaca, terutama jika anda bukan orang yang menulisnya dan anda melihatnya untuk kali pertama. Sangat sukar untuk mencari kaedah mana yang digunakan oleh fungsi.

Mari kita lihat lagi tetapi mengenal pasti kebimbangan logik sebagai komen. Itu akan:

• Pelacak aktiviti
• Muat semula penghalang
• Pemeriksaan Pengesahan
• Locale
• Pendaftaran bas acara

 <pemat>
  <dana>
    …
  


<script>
Eksport Lalai {
  Nama: &#39;App&#39;,

  data () {
    kembali {
      UserActivityTimeout: NULL, // Tracker Aktiviti
      lastuseractivityat: null, // tracker aktiviti
      ReloadCount: 0 // Penyekat Reload
    }
  },

  dikira: {
    isAuthenticated () {...} // cek pengesahan
    locale () {...} // locale
  },

  Tonton: {
    locale (nilai) {...},
    isAuthenticated (nilai) {...} // cek pengesahan
  },

  async dicipta () {
    const initilocale = localStorage.getItem (&#39;locale&#39;) // locale
    tunggu ini.loadLocaleasync (initilocale) // locale
  },

  dipasang () {
    Eventbus. $ On (my_event, this.handlemyevent) // pendaftaran bas acara

    this.setReloadCount () // penghalang tambah nilai
    this.blockreload () // penghalang tambah nilai

    this.activateActivityTracker () // Tracker Aktiviti
    this.resetActivityTimeout () // Tracker Aktiviti
  },

  boredestroy () {
    this.deactivateActivityTracker () // Tracker Aktiviti
    ClearTimeout (this.useractivityTimeout) // Tracker Aktiviti
    Eventbus. $ Off (my_event, this.handlemyevent) // pendaftaran bas acara
  },

  Kaedah: {
    ActivateActivityTracker () {...}, // Tracker Aktiviti
    blockReload () {...}, // penghalang tambah nilai
    deactivateActivityTracker () {...}, // tracker aktiviti
    HandLemyEvent () {...}, // Pendaftaran Bas Acara
    Async LoadLocaleasync (SelectedLocale) {...} // locale
    redirectUser () {...} // cek pengesahan
    resetActivityTimeout () {...}, // Tracker Aktiviti
    seti18nlocale (locale) {...}, // locale
    setReloadCount () {...}, // Reload Blocker
    userActivityTrottler () {...}, // Tracker Aktiviti
  }
}
</script></dana></pemat>

Lihat betapa sukarnya untuk melepaskan semua itu? ?

Sekarang bayangkan anda perlu membuat perubahan dalam satu fungsi (contohnya logik penjejakan aktiviti). Bukan sahaja anda perlu tahu unsur -unsur yang berkaitan dengan logik itu, tetapi walaupun anda tahu, anda masih perlu melompat dan turun antara pilihan komponen yang berbeza.

Mari kita gunakan API Komposisi untuk memisahkan kod dengan kebimbangan logik. Untuk melakukan itu, kami membuat satu fungsi untuk setiap logik yang berkaitan dengan fungsi tertentu. Inilah yang kita panggil fungsi komposisi .

 // logik penjejakan aktiviti
fungsi UseActivityTracker () {
  const userActivityTimeout = ref (null)
  const lastUserActivityat = ref (null)

  fungsi ActivateActivityTracker () {...}
  fungsi deactivateActivityTracker () {...}
  fungsi resetActivityTimeout () {...}
  fungsi userActivityThrottler () {...}

  onBeForemount (() => {
    ActivateActivityTracker ()
    resetActivityTimeout ()
  })

  onunmounted (() => {
    DeactivateActivityTracker ()
    ClearTimeout (userActivityTimeout.Value)
  })
}

 // Muat semula logik menyekat
fungsi usereloadblocker (konteks) {
  Const ReloadCount = Ref (null)

  fungsi blockReload () {...}
  fungsi setReloadCount () {...}

  onMounted (() => {
    setReloadCount ()
    BlockReload ()
  })
}

 // logik locale
fungsi uselocale (konteks) {
  fungsi async loadLocaleasync (selectedLocale) {...}
  fungsi seti18nlocale (locale) {...}

  tonton (() => {
    const locale = ...
    LoadLocaleasync (locale)
  })

  /
  const initiLocale = localStorage.getItem ('locale')
  LoadLocaleAsync (initilocale)
}

 // Pendaftaran pendengar bas acara
Import EventBus dari '@/event-bas'

fungsi useEventBusListener (EventName, Handler) {
  onMounted (() => eventBus $ on (eventName, handler))
  onunmounted (() => eventBus. $ off (eventName, handler))
}

Seperti yang dapat anda lihat, kami dapat mengisytiharkan data reaktif (ref / reaktif), prop yang dikira, kaedah (fungsi biasa), pemerhati (jam tangan) dan cangkuk kitaran hayat (onmounted / onunmounted). Pada dasarnya semua yang biasanya anda gunakan dalam komponen.

Kami mempunyai dua pilihan ketika datang ke mana untuk menyimpan kod. Kita boleh meninggalkannya di dalam komponen atau mengeluarkannya ke dalam fail yang berasingan. Oleh kerana API komposisi belum di sana lagi, tidak ada amalan atau peraturan terbaik mengenai cara menanganinya. Cara saya melihatnya, jika logiknya ditambah dengan komponen tertentu (iaitu ia tidak akan digunakan semula di tempat lain), dan ia tidak boleh hidup tanpa komponen itu sendiri, saya cadangkan meninggalkannya dalam komponen. Di sisi lain, jika fungsi umum yang mungkin akan digunakan semula, saya cadangkan mengeluarkannya ke fail berasingan. Walau bagaimanapun, jika kita mahu menyimpannya dalam fail yang berasingan, kita perlu ingat untuk mengeksport fungsi dari fail dan mengimportnya dalam komponen kami.

Ini adalah bagaimana komponen kami akan kelihatan seperti menggunakan fungsi komposisi yang baru dibuat:

 <pemat>
  <dana>
      <!-- ... -->
  


<script>
Eksport Lalai {
  Nama: &#39;App&#39;,

  persediaan (prop, konteks) {
    UseEventBusListener (my_event, handlemyEvent)
    UseActivityTracker ()
    UserEloadBlocker (konteks)
    uselocale (konteks)

    const isAuthenticated = dikira (() => ...)

    tonton (() => {
      jika (! isAuthenticated) {...}
    })

    fungsi handlemyEvent () {...},

    fungsi uselocale () {...}
    fungsi UseActivityTracker () {...}
    fungsi useEventBusListener () {...}
    fungsi usereloadblocker () {...}
  }
}
</script></dana></pemat>

Ini memberi kita satu fungsi untuk setiap kebimbangan logik. Jika kita mahu menggunakan sebarang kebimbangan khusus, kita perlu memanggil fungsi komposisi yang berkaitan dalam fungsi persediaan baru.

Bayangkan sekali lagi bahawa anda perlu membuat perubahan dalam logik penjejakan aktiviti. Segala -galanya yang berkaitan dengan fungsi itu hidup dalam fungsi UseActivityTracker. Sekarang anda dengan serta -merta tahu di mana hendak melihat dan melompat ke tempat yang betul untuk melihat semua kod yang berkaitan. Cantik!

Mengekstrak kod yang boleh diguna semula

Dalam kes kami, pendaftaran pendengar bas acara kelihatan seperti sekeping kod yang boleh kami gunakan dalam mana -mana komponen yang mendengar acara di bas acara.

Seperti yang dinyatakan sebelum ini, kita boleh menyimpan logik yang berkaitan dengan fungsi tertentu dalam fail berasingan. Mari kita gerakkan persediaan pendengar bas acara kami ke dalam fail yang berasingan.

 // composables/useeventbuslistener.js
Import EventBus dari '@/event-bas'

Fungsi Eksport UseEventBusListener (EventName, Handler) {
  onMounted (() => eventBus $ on (eventName, handler))
  onunmounted (() => eventBus. $ off (eventName, handler))
}

Untuk menggunakannya dalam komponen, kami perlu memastikan kami mengeksport fungsi kami (dinamakan atau lalai) dan mengimportnya dalam komponen.

 <pemat>
  <dana>
    …
  


<script>
Import {UseEventBusListener} dari &#39;@/composables/useEventBusListener&#39;

Eksport Lalai {
  Nama: &#39;MyComponent&#39;,

  persediaan (prop, konteks) {
    UseEventBusListener (my_event, myeventhandled)
    UseEventBusListener (lain -lain_event, myanotherhandled)
  }
}
</script></dana></pemat>

Itu sahaja! Kita kini boleh menggunakannya dalam mana -mana komponen yang kita perlukan.

Membungkus

Terdapat perbincangan berterusan mengenai API Komposisi. Jawatan ini tidak mempunyai niat untuk mempromosikan mana -mana sisi perbincangan. Ia lebih banyak mengenai menunjukkan apabila ia mungkin berguna dan dalam kes -kesnya ia membawa nilai tambahan.

Saya fikir ia lebih mudah untuk memahami konsep mengenai contoh kehidupan sebenar seperti di atas. Terdapat lebih banyak kes penggunaan dan, lebih banyak anda menggunakan API baru, lebih banyak corak yang akan anda lihat. Siaran ini hanyalah beberapa corak asas untuk memulakan anda.

Mari kita pergi lagi melalui kes penggunaan yang dibentangkan dan lihat di mana API komposisi boleh berguna:

Ciri -ciri umum yang boleh hidup sendiri tanpa gandingan yang ketat dengan komponen tertentu

• Semua logik yang berkaitan dengan ciri tertentu dalam satu fail
• Simpan di @/composables/*. Js dan mengimportnya dalam komponen
• Contoh: Pelacak aktiviti, penghalang semula, dan lokasi

Ciri -ciri yang boleh diguna semula yang digunakan dalam pelbagai komponen

• Semua logik yang berkaitan dengan ciri tertentu dalam satu fail
• Simpan di @/composables/*. Js dan import dalam komponen
• Contoh: Pendaftaran pendengar bas acara, pendaftaran acara tingkap, logik animasi biasa, penggunaan perpustakaan biasa

Organisasi kod dalam komponen

• Semua logik yang berkaitan dengan ciri tertentu dalam satu fungsi
• Simpan kod dalam fungsi komposisi dalam komponen
• Kod yang berkaitan dengan kebimbangan logik yang sama berada di tempat yang sama (iaitu tidak perlu melompat antara data, dikira, kaedah, cangkuk kitaran hayat, dll.)

Ingat: Ini semua kerja yang sedang berjalan!

API Komposisi VUE kini sedang bekerja dalam tahap kemajuan dan tertakluk kepada perubahan masa depan. Tiada apa -apa yang disebutkan dalam contoh -contoh di atas pasti, dan kedua -dua sintaks dan kes penggunaan mungkin berubah. Ia bertujuan untuk dihantar dengan VUE Versi 3.0. Sementara itu, anda boleh menyemak pandangan-penggunaan-web untuk koleksi fungsi komposisi yang dijangka dimasukkan ke dalam VUE 3 tetapi boleh digunakan dengan API Komposisi dalam VUE 2.

Jika anda ingin bereksperimen dengan API baru, anda boleh menggunakan perpustakaan @vue/komposisi.

Atas ialah kandungan terperinci Pandangan awal API Komposisi Vue 3 di Liar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!