Panduan Naik Taraf Komprehensif Vue: Penerokaan Mendalam API Komposisi-tutorial js-php.cn

Vue Comprehensive Upgrade Guide: In-depth Exploration of Composition API

Konsep teras dan fungsi API Komposisi
- fungsi persediaan():
- ref dan reaktif:
- Sifat dan pendengar yang dikira:
- Fungsi Komposisi
- Kait kitar hayat:
Komponen Penulisan API Komposisi
Berpindah daripada API Pilihan kepada API Komposisi
- Struktur komponen
- Suntikan Kebergantungan
- Pemfaktoran semula templat

Peningkatan menyeluruh Vue 3.x memperkenalkan API Komposisi, yang merupakan peningkatan besar berbanding API Pilihan tradisional Vue 2.x. Ia menyediakan cara penyusunan kod yang lebih fleksibel dan modular.

Konsep teras dan fungsi API Komposisi

setup() fungsi:

Titik masuk teras dalam Vue 3, digunakan untuk menetapkan keadaan dan logik komponen, yang dilaksanakan selepas cangkuk beforeCreate dan sebelum cangkuk create. Ia menggantikan kandungan yang ditakrifkan pada asalnya dalam pilihan seperti data dan kaedah.

import { ref, computed } from "vue";

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

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};

Salin selepas log masuk

ref dan reaktif:

Digunakan untuk mencipta data responsif, ref digunakan untuk mencipta data responsif jenis asas dan reaktif digunakan untuk proksi responsif objek dan tatasusunan.

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};

Salin selepas log masuk

Sifat dan pendengar yang dikira:

dikira digunakan untuk mencipta sifat dikira yang dikira semula hanya apabila kebergantungan berubah.

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};

Salin selepas log masuk

jam tangan digunakan untuk melihat perubahan dalam data responsif dan melaksanakan panggilan balik apabila perubahan berlaku.

import { ref, watch } from "vue";

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

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};

Salin selepas log masuk

Fungsi Komposisi

API Komposisi menggalakkan penciptaan fungsi gubahan boleh guna semula.

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};

Salin selepas log masuk

Cangkuk kitaran hayat:

Cakuk kitar hayat dalam Vue 3 tidak lagi digunakan terus di dalam persediaan(), tetapi melalui fungsi cangkuk kitaran hayat baharu seperti onBeforeMount dan onMounted.

1. onBeforeMount: Cangkuk ini dipanggil sebelum komponen dipasang pada DOM. Ini serupa dengan cangkuk kitar hayat beforeMount dalam Vue 2.x.

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};

Salin selepas log masuk

2. onMounted: Dipanggil serta-merta selepas komponen dipasang pada DOM. Bersamaan dengan yang dipasang dalam Vue 2.x.

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};

Salin selepas log masuk

3. onBeforeUpdate: Dipanggil sebelum data komponen dikemas kini, tetapi sebelum kemas kini DOM bermula. Sama seperti Vue 2.x's beforeUpdate.

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};

Salin selepas log masuk

4. onUpdated: Dipanggil selepas kemas kini DOM yang disebabkan oleh perubahan data komponen selesai. Setara dengan dikemas kini dalam Vue 2.x.

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};

Salin selepas log masuk

5. onBeforeUnmount: Dipanggil sebelum komponen dinyahpasang. Sama seperti beforeDestroy dalam Vue 2.x.

import { ref, computed } from "vue";

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

    // Computed properties
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
      count.value++;
    }

    // Returns the data and methods needed to be used in the template
    return {
      count,
      doubleCount,
      increment,
    };
  },
};

Salin selepas log masuk

6. onUnmounted: Dipanggil selepas komponen dinyahpasang. Setara dengan dimusnahkan dalam Vue 2.x.

import { ref, reactive } from "vue";

export default {
  setup() {
    // Creating Responsive Primitives Using ref
    const count = ref(0);

    // Creating responsive objects using reactive
    const user = reactive({
      name: "Alice",
      age: 30,
    });

    // Modifying Responsive Data
    count.value++;
    user.age++;

    return { count, user };
  },
};

Salin selepas log masuk

7. onActivated: Dipanggil hanya apabila komponen dibalut dengan diaktifkan.

import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("John");
    const lastName = ref("Doe");

    // Calculate full name
    const fullName = computed(() => `${firstName.value} ${lastName.value}`);

    return { firstName, lastName, fullName };
  },
};

Salin selepas log masuk

8. onDeactivated: Dipanggil hanya apabila komponen dibalut dengan dinyahaktifkan.

import { ref, watch } from "vue";

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

    // Observe the change of count
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};

Salin selepas log masuk

Komponen Penulisan API Komposisi

Buat data responsif: Gunakan ref dan reaktif untuk mencipta pembolehubah responsif.
Sifat terkira: Gunakan fungsi terkira untuk mencipta sifat terkira.
Fungsi responsif: Gunakan toRefs() dan toRef() untuk menukar sifat objek kepada responsif.
Pendengar: Gunakan jam tangan atau watchEffect untuk memantau perubahan data.

// useCounter.js
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Use in components
import { useCounter } from "./useCounter";

export default {
  setup() {
    const { count, increment } = useCounter(10);
    return { count, increment };
  },
};

Salin selepas log masuk

Buat data responsif: Gunakan reaktif untuk mencipta objek responsif yang mengandungi cityInput, bandar dan cuaca. ref juga boleh digunakan untuk jenis asas data responsif, tetapi dalam senario ini, reaktif lebih sesuai untuk mengurus berbilang keadaan.
Sifat yang dikira: Hartanah yang dikira semasaCity mengembalikan secara langsung nilai state.cityInput. Walaupun mungkin lebih intuitif untuk menggunakan v-model="cityInput" secara langsung dalam contoh ini, ia menunjukkan cara untuk menentukan sifat yang dikira.
Fungsi responsif: Gunakan toRefs untuk menukar sifat objek keadaan menjadi rujukan responsif bebas untuk pengikatan langsung dalam templat. Ini terutamanya menunjukkan penggunaan data responsif, bukannya fungsi penukaran itu sendiri, kerana tugasan pemusnahan langsung (seperti const { cityInput } = state;) adalah mencukupi dalam templat.
Pendengar: Gunakan jam tangan untuk mendengar perubahan dalam cityInput dan kosongkan keadaan cuaca setiap kali input berubah, supaya ia boleh disoal pada masa akan datang.

Berpindah daripada API Pilihan kepada API Komposisi

Struktur komponen

Asingkan keadaan, kaedah dan logik ke dalam fungsi yang berasingan. Dalam API Pilihan, kami biasanya mentakrifkan data, kaedah, pengiraan, dll. dalam pilihan komponen. Dalam API Komposisi, logik ini dipisahkan kepada fungsi yang berasingan. Contohnya:

API Pilihan:

import { onBeforeMount } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is about to be mounted");
    });
  },
};

Salin selepas log masuk

API Komposisi:

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component mounted");
    });
  },
};

Salin selepas log masuk

Suntikan Ketergantungan

Gunakan menyediakan dan menyuntik. Dalam API Pilihan, kami menggunakan menyediakan dan menyuntik untuk menghantar data. Dalam API Komposisi, proses ini kekal sama:

API Pilihan:

import { onBeforeUpdate } from "vue";

export default {
  setup() {
    let previousData;
    onBeforeUpdate(() => {
      console.log("Before data update:", previousData);
    });

    return { data };
  },
};

Salin selepas log masuk

API Komposisi:

import { onUpdated } from "vue";

export default {
  setup() {
    onUpdated(() => {
      console.log("Component update completed");
    });
  },
};

Salin selepas log masuk

Pemfaktoran semula templat

Tukar sifat terikat dan kaedah daripada ini kepada rujukan langsung.

Atas ialah kandungan terperinci Panduan Naik Taraf Komprehensif Vue: Penerokaan Mendalam API Komposisi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!