Bagaimana untuk mencampurkan campuran secara global dalam Vue?

Mixin dalam Vue ialah cara mudah untuk menggunakan semula komponen. Ia boleh merangkum beberapa logik yang biasa digunakan ke dalam campuran dan menyuntiknya ke dalam berbilang komponen untuk digunakan semula, sekali gus meningkatkan kadar penggunaan semula kod dan kecekapan pembangunan. Vue memperkenalkan fungsi mixin global dalam versi 2.2.0, yang boleh menyuntik mixin ke dalam semua komponen Artikel ini akan memperkenalkan cara melaksanakan mixin global dalam Vue dan membincangkan kelebihan dan kekurangannya.

Penggunaan mixin global

Untuk mencampurkan mixin secara global dalam Vue, kita perlu menggunakan fungsi Vue.mixin. Fungsi ini menerima objek mixin sebagai parameter, dan objek mixin ini boleh mentakrifkan pelbagai sifat dan kaedah yang sama seperti komponen.

const myMixin ={
  methods: {
    // ...
  }
}
Vue.mixin(myMixin)

Kini, kami secara global mendapati kaedah dalam objek myMixin boleh diakses oleh semua komponen.

Jadi, apa yang berlaku apabila kita mentakrifkan sifat atau kaedah dengan nama yang sama dengan mixin dalam komponen? Keutamaan mixin Vue mengikut peraturan dari bawah ke atas dan kiri ke kanan, iaitu sifat atau kaedah dengan nama yang sama dalam campuran atau komponen yang ditakrifkan kemudian akan mengatasi sifat atau kaedah sebelumnya.

Contohnya:

const mixinA ={
  created() {
    console.log('mixinA created')
  },
  methods: {
    foo() {
      console.log('mixinA foo')
    }
  }
}

const mixinB ={
  created() {
    console.log('mixinB created')
  },
  methods: {
    foo() {
      console.log('mixinB foo')
    }
  }
}

const myComponent ={
  created() {
    console.log('myComponent created')
  },
  mixins: [mixinA, mixinB],
  methods: {
    foo() {
      console.log('myComponent foo')
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  }
})

// 输出
// mixinA created
// mixinB created
// myComponent created

Dalam contoh di atas, kami mentakrifkan dua campuran (mixinA dan mixinB), dan satu komponen (myComponent). Antaranya, fungsi cangkuk yang dicipta dan kaedah foo kedua-duanya ditakrifkan dalam mixinA dan mixinB, dan kaedah foo dengan nama yang sama juga ditakrifkan dalam myComponent. Pada akhirnya, Vue akan mengatasi mengikut keutamaan sifat atau kaedah dengan nama yang sama dalam mixin atau komponen yang ditakrifkan kemudian:

myComponent created

Ini menunjukkan bahawa sifat atau kaedah dengan. nama yang sama dalam mixin dan komponen akan bertanggungjawab mengatasi sifat atau kaedah dalam mixin.

Kebaikan dan keburukan mixin global

Walaupun mixin global boleh dengan mudah merangkum logik perniagaan ke dalam mixin dan menggunakannya semula dalam pelbagai komponen, terdapat juga banyak masalah yang berpotensi.

Kelebihan

1. Penyahgandingan fungsional dan penggunaan semula kod. Kod yang sama dalam berbilang komponen boleh diekstrak dan digunakan semula, sekali gus meningkatkan kebolehskalaan kod.
2. Mengurangkan kerumitan komponen. Kod berlebihan boleh diekstrak daripada komponen, mengurangkan kerumitan dalaman komponen dan meningkatkan kebolehbacaan dan kebolehselenggaraan komponen.
3. Urus dan selenggara kod dengan mudah. Campuran global boleh memisahkan berbilang komponen untuk memudahkan pengurusan kod dan pemfaktoran semula.

Kelemahan

1. Konflik nama dan isu penggantian. Memandangkan mixin global akan menyuntik mixin ke dalam semua komponen, jika digunakan secara tidak wajar, mungkin terdapat konflik dan mengatasi masalah dalam penamaan harta dan kaedah, malah mencemarkan ruang nama global.
2. Kod logik bertaburan. Penggunaan campuran global yang kerap untuk penggunaan semula kod boleh membawa kepada kod logik yang berselerak dan sukar untuk dikekalkan.
3. Gandingan antara komponen. Gandingan antara komponen akan meningkat dengan panggilan global mixin, menyebabkan kebebasan antara komponen berkurangan.

Berdasarkan kelebihan dan kekurangan di atas, kita boleh memilih pencampuran global untuk merangkum dan menggunakan semula logik perniagaan mengikut senario perniagaan tertentu, atau menggunakan teknologi guna semula lain, seperti fungsi slot dan render, untuk lebih baik Mengurus dan mengekalkan kod.

Ringkasan

Campuran global ialah cara mudah untuk merangkum logik yang biasa digunakan ke dalam campuran untuk digunakan semula berbilang komponen. Walau bagaimanapun, jika digunakan secara tidak wajar, mungkin terdapat masalah seperti konflik penamaan kod dan isu liputan, kod logik yang berselerak dan gandingan yang meningkat antara komponen. Oleh itu, apabila menggunakan campuran global, anda mesti memilih kaedah yang sesuai untuk enkapsulasi logik dan penggunaan semula kod berdasarkan senario perniagaan tertentu.

Atas ialah kandungan terperinci Bagaimana untuk mencampurkan campuran secara global dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!