Kod perkongsian antara komponen VUE? Jika anda sudah biasa dengan Vue 2, anda mungkin menggunakan Mixin untuk mencapai matlamat ini. Tetapi API Komposisi baru (kini tersedia sebagai plugin untuk Vue 2 dan merupakan ciri Vue 3 yang akan datang) menyediakan penyelesaian yang lebih baik.

Artikel ini akan meneroka kekurangan Mixin dan memahami bagaimana API Komposisi mengatasi kekurangan ini dan menjadikan aplikasi VUE lebih berskala.

Penerangan ringkas mengenai Mixin

Mari kita cepat semak mod Mixin, kerana ia adalah penting untuk apa yang akan kita pelajari di bahagian seterusnya.

Biasanya, komponen VUE ditakrifkan oleh objek JavaScript yang mempunyai pelbagai sifat yang mewakili fungsi yang kita perlukan untuk dilaksanakan - seperti data, kaedah, sifat yang dikira, dll.

 // mycomponent.js
Eksport Lalai {
  data: () => ({
    MyDataproperty: Null
  }),
  Kaedah: {
    myMethod () {...}
  }
  // ...
}

Apabila kita ingin berkongsi sifat yang sama antara komponen, kita dapat mengekstrak sifat umum ke dalam modul yang berasingan:

 // mymixin.js
Eksport Lalai {
  data: () => ({
    myshareddataproperty: null
  }),
  Kaedah: {
    mySharedMethod () {...}
  }
}

Sekarang kita boleh menambah campuran ini ke mana -mana komponen yang menggunakannya dengan memberikannya kepada harta konfigurasi Mixin. Semasa runtime, Vue menggabungkan sifat komponen dengan mana -mana mixin tambahan.

 // PenggunaanComponent.js
import mymixin dari "./mymixin.js";

Eksport Lalai {
  Mixins: [mymixin],
  data: () => ({
    mylocaldataproperty: null
  }),
  Kaedah: {
    myLocalMethod () {...}
  }
}

Untuk contoh khusus ini, definisi komponen yang digunakan oleh runtime adalah seperti berikut:

 Eksport Lalai {
  data: () => ({
    myshareddataproperty: null,
    mylocaldataproperty: null
  }),
  Kaedah: {
    mySharedMethod () {...},
    myLocalMethod () {...}
  }
}

Mixin dianggap "berbahaya"

Seawal pertengahan 2016, Dan Abramov menulis "Mixins dianggap berbahaya", di mana dia percaya menggunakan Mixins dalam komponen React untuk menggunakan semula logik adalah anti-corak, yang menganjurkan mengelakkannya.

Malangnya, kekurangan yang disebutkannya mengenai React Mixin juga berlaku untuk Vue. Sebelum kita memahami bagaimana API komposisi mengatasi kekurangan ini, mari kita lihat kekurangan ini.

Menamakan konflik

Kami melihat bagaimana mod Mixin menggabungkan dua objek semasa runtime. Apa yang berlaku jika mereka semua berkongsi harta dengan nama yang sama?

 const mixin = {
  data: () => ({
    MyProp: Null
  })
}

Eksport Lalai {
  Mixins: [Mixin],
  data: () => ({
    // Nama yang sama!
    MyProp: Null
  })
}

Di sinilah strategi penggabungan dimainkan. Ini adalah satu set peraturan untuk menentukan apa yang berlaku apabila komponen mengandungi pelbagai pilihan dengan nama yang sama.

Dasar gabungan (tetapi boleh dikonfigurasi) Komponen Vue menetapkan bahawa pilihan tempatan akan mengatasi pilihan Mixin. Tetapi ada pengecualian. Sebagai contoh, jika kita mempunyai cangkuk kitaran hayat pelbagai jenis yang sama, cangkuk ini akan ditambah ke array cangkuk dan semua cangkuk akan dipanggil secara berurutan.

Walaupun kita tidak menghadapi sebarang kesilapan sebenar, ia boleh menjadi semakin sukar untuk menulis kod apabila berurusan dengan sifat bernama antara pelbagai komponen dan campuran. Ini amat sukar apabila Mixin pihak ketiga sebagai pakej NPM dan sifat bernama yang boleh menyebabkan konflik.

Ketergantungan tersirat

Tiada hubungan hierarki antara Mixin dan komponen yang menggunakannya. Ini bermakna komponen boleh menggunakan sifat data yang ditakrifkan dalam mixin (mis. MysharedDataproperty), tetapi mixin juga boleh menggunakannya dengan mengandaikan sifat data yang ditakrifkan dalam komponen (mis. Mylocaldataproperty). Ini adalah perkara biasa apabila menggunakan mixin untuk berkongsi pengesahan input. Mixin mungkin mengharapkan komponen mempunyai nilai input yang akan digunakan dalam kaedah mengesahkannya sendiri.

Tetapi ini boleh menyebabkan masalah. Apa yang berlaku jika kita mahu refactor komponen kemudian dan menukar nama pembolehubah yang diperlukan oleh mixin? Kami tidak akan melihat sebarang masalah daripada komponen. Pemeriksa kod tidak akan dapati sama ada. Kami hanya akan melihat kesilapan semasa runtime.

Sekarang bayangkan komponen yang mengandungi banyak campuran. Bolehkah kita refactor sifat data tempatan, atau adakah ia akan memecahkan mixin? Mixin mana? Kita perlu mencari semua campuran secara manual untuk mengetahui.

Berhijrah dari Mixin

Artikel Dan menyediakan alternatif kepada Mixin, termasuk komponen lanjutan, kaedah utiliti, dan beberapa corak kombinasi komponen lain.

Walaupun Vue adalah sama dengan React dalam pelbagai cara, corak alternatif yang dicadangkannya tidak ditukar dengan baik kepada Vue. Jadi, walaupun jawatan ini ditulis pada pertengahan 2016, pemaju Vue telah mengalami isu-isu Mixin sejak itu.

Sehingga sekarang. Kelemahan Mixin adalah salah satu faktor motivasi utama di sebalik API Komposisi. Sebelum anda memahami bagaimana ia mengatasi masalah Mixin, mari kita lihat dengan cepat bagaimana ia berfungsi.

Kursus Kemalangan API Komposisi

Idea utama API komposisi adalah bahawa bukannya menentukan fungsi komponen (seperti negara, kaedah, sifat yang dikira, dan lain -lain) sebagai sifat objek, ia ditakrifkan sebagai pembolehubah JavaScript yang dikembalikan dari fungsi persediaan baru.

Berikut adalah contoh klasik komponen Vue 2 yang ditakrifkan menggunakan API Komposisi, yang mentakrifkan fungsi "kaunter":

 //Counter.vue
Eksport Lalai {
  data: () => ({
    Kira: 0
  }),
  Kaedah: {
    kenaikan () {
      this.count;
    }
  },
  dikira: {
    double () {
      kembali ini.count * 2;
    }
  }
}

Berikut adalah komponen yang sama yang ditakrifkan menggunakan API Komposisi.

 // counter.vue
import {ref, dikira} dari "vue";

Eksport Lalai {
  persediaan () {
    const count = ref (0);
    const double = computed (() => count.value * 2)
    peningkatan fungsi () {
      Count.value;
    }
    kembali {
      hitung,
      ganda,
      Kenaikan
    }
  }
}

Anda akan terlebih dahulu melihat bahawa kami mengimport fungsi REF, yang membolehkan kami menentukan pemboleh ubah responsif yang mempunyai fungsi yang hampir sama sebagai pemboleh ubah data. Begitu juga dengan fungsi berkomputer.

Kaedah kenaikan tidak responsif, jadi ia boleh diisytiharkan sebagai fungsi JavaScript biasa. Perhatikan bahawa kita perlu menukar nilai subproperty untuk mengubah nilai pembolehubah responsif Count. Ini kerana pembolehubah responsif yang dibuat dengan ref perlu menjadi objek untuk mengekalkan respons mereka apabila diluluskan.

Adalah lebih baik untuk berunding dengan dokumentasi API Komposisi VUE untuk pemahaman terperinci tentang bagaimana ref berfungsi.

Selepas menentukan fungsi ini, kami mengembalikannya dari fungsi persediaan. Tidak ada perbezaan dalam fungsi dua komponen di atas. Apa yang kami lakukan adalah menggunakan API alternatif.

Petua: API Komposisi akan menjadi ciri teras VUE 3, tetapi anda juga boleh menggunakan plugin NPM @VUE/COMPOSIS-API dalam VUE 2.

Pengekstrakan kod

Kelebihan pertama API komposisi adalah kemudahan untuk mengekstrak logik.

Mari kita gunakan API Komposisi untuk refactor komponen yang ditakrifkan di atas supaya fungsi yang kita tentukan adalah dalam modul JavaScript usecounter. (Awalan menggunakan "penggunaan" sebagai penerangan fungsi adalah konvensyen penamaan API komposisi.)

 // usecounter.js
import {ref, dikira} dari "vue";

fungsi lalai eksport () {
  const count = ref (0);
  const double = computed (() => count.value * 2)
  peningkatan fungsi () {
    Count.value;
  }
  kembali {
    hitung,
    ganda,
    Kenaikan
  }
}

Penggunaan semula kod

Untuk menggunakan fungsi ini dalam komponen, kami hanya mengimport modul ke dalam fail komponen dan memanggilnya (perhatikan bahawa import adalah fungsi). Ini akan mengembalikan pembolehubah yang kita tentukan, yang kemudiannya dapat kembali dari fungsi persediaan.

 // mycomponent.js
import usecounter dari "./usecounter.js";

Eksport Lalai {
  persediaan () {
    const {count, double, kenaikan} = useCounter ();
    kembali {
      hitung,
      ganda,
      Kenaikan
    }
  }
}

Pada mulanya, ini nampaknya agak panjang dan tidak bermakna, tetapi mari kita lihat bagaimana corak ini mengatasi masalah Mixin yang telah kita lihat sebelumnya.

Menamakan konflik ... diselesaikan!

Kami telah melihat sebelum ini Mixin boleh menggunakan sifat -sifat yang mungkin nama yang sama seperti yang ada dalam komponen penggunaan, atau lebih tersembunyi seperti yang ada dalam campuran lain yang digunakan oleh komponen penggunaan.

Masalah ini tidak wujud dalam API Komposisi kerana kita perlu menamakan mana -mana keadaan atau kaedah yang dikembalikan dari fungsi komposit:

 Eksport Lalai {
  persediaan () {
    const {somevar1, somemethod1} = useCompFunction1 ();
    const {somevar2, somemethod2} = useCompFunction2 ();
    kembali {
      Somevar1,
      Somemethod1,
      Somevar2,
      Somemethod2
    }
  }
}

Konflik penamaan akan diselesaikan dengan cara yang sama seperti mana -mana pembolehubah JavaScript lain.

Ketergantungan yang tersirat ... diselesaikan!

Kami juga telah melihat sebelum mixin boleh menggunakan sifat data yang ditakrifkan pada komponen, yang menjadikan kod rapuh dan sukar difahami.

Fungsi gabungan juga boleh memanggil pembolehubah tempatan yang ditakrifkan dalam komponen. Walau bagaimanapun, perbezaannya adalah bahawa pembolehubah ini kini mesti diluluskan secara eksplisit kepada fungsi gabungan.

 import useCompfunction dari "./usecompfunction";

Eksport Lalai {
  persediaan () {
    // nilai tempatan yang perlu digunakan untuk fungsi gabungan const mylocalval = ref (0);

    // Ia mesti diluluskan secara eksplisit sebagai parameter const {...} = useCompFunction (myLocalVal);
  }
}

Meringkaskan

Mod Mixin kelihatan sangat selamat di permukaan. Walau bagaimanapun, kerana ia meningkatkan kerentanan kod dan cara ia topeng keupayaan untuk memahami fungsi, perkongsian kod dengan menggabungkan objek menjadi anti-corak.

Perkara yang paling bijak mengenai API Komposisi adalah bahawa ia membolehkan VUE bergantung kepada langkah -langkah keselamatan yang dibina ke JavaScript asli untuk berkongsi kod, seperti pembolehubah lulus ke fungsi dan sistem modul.

Adakah ini bermakna bahawa API komposisi lebih tinggi daripada API klasik Vue dalam setiap cara? Tidak. Dalam kebanyakan kes, anda boleh berpegang pada API klasik. Walau bagaimanapun, jika anda bercadang untuk menggunakan semula kod anda, API komposisi sudah pasti pilihan yang lebih baik.

Atas ialah kandungan terperinci Bagaimana API Komposisi Vue menggantikan Vue Mixins. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!