Ketahui gabungan API dalam Vue 3 untuk mengatur dan mengurus kod komponen dengan lebih baik

Ketahui gabungan API dalam Vue 3 untuk mengatur dan mengurus kod komponen dengan lebih baik

Vue 3 ialah versi terkini rangka kerja Vue , yang memperkenalkan banyak ciri dan penambahbaikan baharu yang menarik, yang paling ketara ialah API komposisi. API Boleh Gubah membolehkan kami mengatur dan mengurus kod komponen dengan lebih baik, serta menggunakan semula dan berkongsi logik dengan lebih baik.

Dalam Vue 2, kami menggunakan API Pilihan untuk mentakrif dan menyusun komponen. Setiap komponen mengandungi objek pilihan, yang mengandungi data komponen, kaedah, cangkuk kitaran hayat, dsb. Pendekatan ini boleh menyebabkan kod mengelirukan yang sukar diselenggara dan diuji apabila komponennya besar dan kompleks. API tersusun Vue 3 menyediakan cara yang lebih ringkas, fleksibel dan boleh digubah untuk menulis komponen.

1. Penggunaan asas
API gabungan adalah berdasarkan fungsi dan menyusun logik melalui "komposisi". Kita boleh membahagikan logik komponen kepada fungsi yang lebih kecil dan kemudian menggabungkan fungsi ini untuk membina komponen.

import { reactive, computed } from 'vue';

export default {
  setup() {
    // 响应式数据
    const state = reactive({
      count: 0,
    });

    // 计算属性
    const double = computed(() => state.count * 2);

    // 方法
    const increment = () => {
      state.count++;
    };

    return {
      state,
      double,
      increment,
    };
  },
};

Dalam contoh ini, kami menggunakan fungsi setup untuk menyediakan logik komponen. Fungsi setup ialah fungsi khas yang akan dipanggil sebelum komponen dicipta. Kita boleh menentukan data reaktif, sifat yang dikira dan kaedah dalam fungsi setup dan menggunakannya sebagai nilai pulangan. setup函数来设置组件的逻辑。setup函数是一个特殊的函数，它会在组件创建之前被调用。我们可以在setup函数中定义响应式数据、计算属性和方法，并将它们作为返回值。

在上面的代码中，我们通过reactive函数来创建一个响应式的state对象，其中包含了一个count属性。我们还使用computed函数定义了一个计算属性double，它将count属性的值乘以2。最后，我们定义了一个increment方法，用于增加count属性的值。在setup函数的返回值中，我们将state、double和increment作为属性导出。

二、逻辑复用
使用组合式API，我们可以更容易地实现逻辑的复用。我们可以将一些常用的逻辑提取成自定义的Hook，并在多个组件中复用。

// useCounter.js
import { reactive } from 'vue';

export default function useCounter(initialValue) {
  const state = reactive({
    count: initialValue,
  });

  const increment = () => {
    state.count++;
  };

  const decrement = () => {
    state.count--;
  };

  return {
    state,
    increment,
    decrement,
  };
}

// ComponentA.vue
import { computed } from 'vue';
import useCounter from './useCounter';

export default {
  setup() {
    const { state, increment, decrement } = useCounter(0);
    const double = computed(() => state.count * 2);

    // ...

    return {
      state,
      double,
      increment,
      decrement,
    };
  },
};

// ComponentB.vue
import { computed } from 'vue';
import useCounter from './useCounter';

export default {
  setup() {
    const { state, increment, decrement } = useCounter(100);
    const half = computed(() => state.count / 2);

    // ...

    return {
      state,
      half,
      increment,
      decrement,
    };
  },
};

在这个示例中，我们创建了一个自定义的HookuseCounter来处理计数逻辑。useCounter函数接受一个初始值作为参数，并返回一个包含响应式数据和方法的对象。我们可以在任何需要计数逻辑的组件中调用useCounter函数，并使用返回值中的属性。

在ComponentA.vue和ComponentB.vue中，我们分别使用了不同的初始值调用了useCounter函数，并使用返回的属性来实现不同的计算逻辑。

三、与其他API组合使用
组合式API可以与Vue的其他API，如生命周期钩子、自定义指令等进行灵活的组合使用，使我们能够更好地控制组件的行为。

import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    // 组件挂载时触发
    onMounted(() => {
      console.log('Component is mounted');
    });

    // 组件卸载前触发
    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted');
    });

    // ...

    return {
      count,
      increment,
    };
  },
};

在这个示例中，我们使用ref函数来创建了一个响应式的count变量，并定义了一个increment方法来增加count的值。我们还使用了onMounted钩子和onBeforeUnmount

Dalam kod di atas, kami menggunakan fungsi reaktif untuk mencipta objek state responsif, yang mengandungi count hartanah. Kami juga mentakrifkan sifat terkira <code>double menggunakan fungsi computed, yang mendarabkan nilai sifat count dengan 2. Akhir sekali, kami mentakrifkan kaedah kenaikan untuk meningkatkan nilai atribut count. Dalam nilai pulangan fungsi setup, kami mengeksport state, double dan increment sebagai sifat.

2. Penggunaan semula logik #🎜🎜# Menggunakan gabungan API, kita boleh melaksanakan penggunaan semula logik dengan lebih mudah. Kami boleh mengekstrak beberapa logik yang biasa digunakan ke dalam Cangkuk tersuai dan menggunakannya semula dalam berbilang komponen. #🎜🎜#rrreee#🎜🎜#Dalam contoh ini, kami mencipta HookuseCounter tersuai untuk mengendalikan logik pengiraan. Fungsi useCounter menerima nilai awal sebagai parameter dan mengembalikan objek yang mengandungi data dan kaedah reaktif. Kita boleh memanggil fungsi useCounter dalam mana-mana komponen yang memerlukan logik pengiraan dan menggunakan sifat dalam nilai pulangan. #🎜🎜##🎜🎜#Dalam ComponentA.vue dan ComponentB.vue, kami menggunakan nilai awal yang berbeza untuk memanggil fungsi useCounter dan gunakan sifat yang dikembalikan untuk melaksanakan logik pengiraan yang berbeza. #🎜🎜##🎜🎜#3 Gunakan dalam kombinasi dengan API lain #🎜🎜# API gabungan boleh digabungkan secara fleksibel dengan API Vue yang lain, seperti cangkuk kitaran hayat, arahan tersuai, dsb., membolehkan kami mengawal dengan lebih baik. tingkah laku komponen. #🎜🎜#rrreee#🎜🎜#Dalam contoh ini, kami menggunakan fungsi ref untuk mencipta pembolehubah count responsif dan mentakrifkan kaedah kenaikan untuk meningkatkan nilai count. Kami juga menggunakan cangkuk onMounted dan cangkuk onBeforeUnmount untuk melaksanakan operasi yang sepadan apabila komponen dipasang dan dinyahlekapkan. #🎜🎜##🎜🎜#API komposit memberi kita cara yang lebih fleksibel, boleh digubah dan boleh diuji untuk menyusun dan mengurus kod komponen. Dengan memisahkan logik dan menggunakannya semula, kami boleh meningkatkan kebolehbacaan, kebolehselenggaraan dan kebolehskalaan kod dengan lebih baik. Jika anda belum mencuba API boleh gubah Vue 3, sekarang adalah masa yang tepat! #🎜🎜#

Atas ialah kandungan terperinci Ketahui gabungan API dalam Vue 3 untuk mengatur dan mengurus kod komponen dengan lebih baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!