Bagaimana untuk menyesuaikan Cangkuk dalam Vue3

Komposisi Api memisahkan Vue2 Option Api untuk mencapai gandingan rendah dan kohesi tinggi

Nota: Jika Komposisi Api digunakan di bawah komponen dengan fungsi yang kompleks dan sejumlah besar code , kami bekerjasama dengan Hooks tersuai untuk menulis kod dalam blok berfungsi, dan pembolehubah dan kaedah ditakrifkan dan dipanggil bersama-sama Contohnya, fungsi A menyepadukan pembolehubah responsif dan kaedah Untuk penyelenggaraan kemudian, kami hanya perlu menukar kod tersebut Modul fungsi. Seperti Vue2 dalam Option Api, anda perlu memberi perhatian kepada kaedah dan data yang tersebar secara logik pada masa yang sama.

Jadi menulis Cangkuk tersuai dalam Vue3 mesti dikuasai! Semuanya merangkumi idea gandingan rendah dan kohesi tinggi Vue3 Composition Api! Selepas membaca dokumen rasmi dan templat pentadbir sumber terbuka, pengarang menggunakan sejumlah besar Hooks tersuai!

Tentukan Cangkuk tersuai Vue3:

Walaupun pegawai tidak menyatakan dengan jelas atau mentakrifkan Cangkuk tersuai, ia digunakan di mana-mana

Ekstrak dalam bentuk fungsi Beberapa kaedah boleh guna semula digantung seperti cangkuk dan boleh diperkenalkan dan dipanggil pada bila-bila masa untuk mencapai matlamat kohesi tinggi dan gandingan rendah

• Ekstrak fungsi boleh guna semula ke dalam Fail JS luaran

• Nama fungsi/nama fail bermula dengan penggunaan, dalam bentuk: useXX

• Menyahbina dan mendedahkan pembolehubah atau kaedah reaktif secara eksplisit apabila merujuk Ia keluar seperti: const {nameRef, Fn} = useXX()

• (nyahbina pembolehubah dan kaedah cangkuk tersuai dalam fungsi persediaan)

Contoh:

import { ref, watch } from 'vue';
const useAdd= ({ num1, num2 })  =>{
    const addNum = ref(0)
    watch([num1, num2], ([num1, num2]) => {
        addFn(num1, num2)
    })
    const addFn = (num1, num2) => {
        addNum.value = num1 + num2
    }
    return {
        addNum,
        addFn
    }
}
export default useAdd

Fungsi tolak-Cangkuk

• //减法功能-Hook
  import { ref, watch } from 'vue';
  export function useSub  ({ num1, num2 }){
      const subNum = ref(0)
      watch([num1, num2], ([num1, num2]) => {
          subFn(num1, num2)
      })
      const subFn = (num1, num2) => {
          subNum.value = num1 - num2
      }
      return {
          subNum,
          subFn
      }
  }

Komponen pengiraan penambahan dan penolakan

• rreee

  Hubungan antara Cangkuk tersuai Vue3 dan Mixin dalam era Vue2:

Mixin Tidak Mencukupi

Dalam Vue 2, mixin mengabstrak beberapa logik komponen ke dalam alat utama blok boleh guna semula. Walau bagaimanapun, mereka mempunyai beberapa masalah:

• 1 Mixin terdedah kepada konflik: kerana sifat setiap mixin digabungkan ke dalam komponen yang sama, untuk mengelakkan konflik nama harta, anda masih perlu memahami ciri-ciri satu sama lain. .

2. Kebolehgunaan semula adalah terhad: kita tidak boleh menghantar sebarang parameter kepada mixin untuk menukar logiknya, yang mengurangkan fleksibilitinya dalam logik abstrak.

Perenggan di atas ialah kandungan dokumen rasmi Vue3, yang boleh diringkaskan dan ditambah sebagai:

1 Kaedah dan atribut mixin yang sukar dikesan

Vue3 Cangkuk tersuai boleh

Cangkuk tersuai Vue3, mendedahkan pembolehubah atau kaedah responsif secara eksplisit semasa merujuk, seperti:

const {nameRef, Fn} = useXX()

Mixins

<template>
    <div>
        num1:<input v-model.number="num1"  />
        <br />
        num2:<input v-model.number="num2"  />
    </div>
    <span>加法等于:{{ addNum }}</span>
    <br />
    <span>减法等于:{{ subNum }}</span>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import useAdd from &#39;./useAdd.js&#39;     //引入自动hook 
import { useSub } from &#39;./useSub.js&#39; //引入自动hook 

const num1 = ref(2)
const num2 = ref(1)
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { addNum, addFn } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)
//减法功能-自定义Hook (将响应式变量或者方法形式暴露出来)
const { subNum, subFn } = useSub({ num1, num2 })
subFn(num1.value, num2.value)
</script>

Kekeliruan Mixin yang tidak diketahui, kami tidak dapat mengetahui dari mana fail Mixin berasal, yang membawa kesukaran kepada penyelenggaraan kemudian

Cangkuk tersuai Vue3

export default {
  mixins: [ a, b, c, d, e, f, g ], //一个组件内可以混入各种功能的Mixin
  mounted() {
    console.log(this.name)  //问题来了，这个name是来自于哪个mixin？
  }
}

kami Adalah mudah untuk melihat pembolehubah reaktif dan kaedah yang didedahkan secara eksplisit oleh setiap Cangkuk

2. Anda tidak boleh menghantar parameter kepada Mixin untuk menukar logik

Tetapi Cangkuk tersuai Vue3 boleh:

cangkuk adat VUE3 boleh lulus mana -mana parameter untuk menukar logiknya , tetapi tidak boleh menghantar parameter terus kepada Mixin, kerana Mixin tidak didedahkan dalam bentuk fungsi dan tidak melepasi parameter

Cangkuk tersuai Vue3

Tambahkan Cangkuk purata berdasarkan contoh di atas

//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { addNum, addFn } = useAdd({ num1, num2 })
addFn(num1.value, num2.value)
//减法功能-自定义Hook (将响应式变量或者方法形式暴露出来)
const { subNum, subFn } = useSub({ num1, num2 })
subFn(num1.value, num2.value)

Dalam komponen

export default {
  mixins: [ addMixin, subMixin], //组件内混入加法和减法Mixin
  mounted(){
      this.add(num1,num2) //调用addMixin内部的add方法
      this.sub(num1,num2) //调用subMixin内部的sub方法
  }  
}

Cangkuk tersuai Vue3 boleh melepasi sebarang parameter secara fleksibel untuk menukar logiknya Parameter tidak terhad kepada pembolehubah yang didedahkan oleh cangkuk lain, yang meningkatkan fleksibiliti abstrak Vue3.

3. Pembolehubah Mixin dengan nama yang sama akan ditimpa

Vue3 Custom Hook boleh menamakan semula pembolehubah dengan nama yang sama apabila diperkenalkan

Mixins

//平均功能-Hook
import { ref, watch } from "vue";
export function useAverage(addNum) {
  const averageNum = ref(0);
  watch(addNum, (addNum) => {
    averageFn(addNum);
  });
  const averageFn = (addNum) => {
    averageNum.value = addNum / 2;
  };
  return {
    averageNum,
    averageFn,
  };
}

Jika ini Pembolehubah totalNum dengan nama yang sama dikembalikan oleh hasil pengiraan .add(num1,num2) dan this.sub(num1,num2) Memandangkan JS adalah single-thread, yang diperkenalkan kemudian akan menulis ganti TotalNum adalah akhirnya nilai tolak tolak

Vue3 Custom Hooks

rreee

Dalam Vue3 custom Hooks, walaupun penambahan dan tolak Cangkuk kedua-duanya mengembalikan jumlahNum, pembolehubah boleh dinamakan semula dengan mudah menggunakan ES6 pemusnahan objek

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan Cangkuk dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!