Penggunaan fungsi kitaran hayat yang dipasang dalam dokumentasi Vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk membina aplikasi satu halaman dan halaman web dinamik. Rangka kerja Vue menyediakan banyak fungsi kitaran hayat, salah satunya adalah fungsi yang sangat penting ialah fungsi yang dipasang. Dalam artikel ini, kami akan meneroka penggunaan fungsi kitaran hayat yang dipasang dalam dokumentasi Vue.

Fungsi kitaran hayat yang dipasang ialah fungsi pelaksanaan tika Vue selepas pemasangan selesai. Dalam dipasang, kami mempunyai akses kepada elemen DOM yang diberikan dan boleh melakukan sebarang operasi yang diperlukan padanya. Khususnya, fungsi kitaran hayat yang dipasang akan dipanggil serta-merta selepas tika Vue dimulakan, yang bermaksud bahawa tika itu sedia, iaitu, elemen DOM telah diberikan. Fungsi ini hanya akan dipanggil sekali.

Fungsi kitaran hayat yang dipasang biasanya digunakan dalam senario berikut:

1. Dapatkan objek elemen, objek nod atau mulakan beberapa pemalam dalam pustaka pihak ketiga

Dalam Dalam fungsi yang dipasang, anda boleh mendapatkan objek elemen atau objek nod dan melakukan sebarang operasi yang diperlukan padanya. Sebagai contoh, dapatkan rujukan kepada elemen tertentu melalui kaedah querySelector, dan minta data secara tak segerak melalui ajax.

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  mounted(){
    const app = document.querySelector("#app");  // 获取带有id="app"的DOM元素
    console.log(app);  
  }
}
</script>

Anda juga boleh memulakan pustaka pihak ketiga atau pemalam yang dipasang. Contohnya, mulakan pemalam Vue-Router, Vue-i18n, dsb. dalam fungsi kitaran hayat.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter); // VueRouter插件初始化

new Vue({
  router: new VueRouter({ .... }),
  ...
  mounted(){ /* 插件初始化 */ } 
})

2. Hantar permintaan Ajax ke pelayan, dapatkan data dan kemas kini data dalam Vue

Dalam fungsi kitaran hayat yang dipasang, kami boleh menghantar permintaan Ajax ke pelayan dengan menggunakan contoh Vue Hantar permintaan Ajax dan kemas kini atribut data kami.

import axios from 'axios';

export default {
    data(){
        return{
            posts: []
        }
    },
    mounted(){
        axios.get('https://jsonplaceholder.typicode.com/todos').then(response => {
            this.posts = response.data;  // 获取远程JSON数据并更新组件的Data
        });    
    }
}

Contoh di atas meminta data senarai tugasan daripada pelayan jauh dan mengemas kini objek data dalam Vue. Dengan cara ini, kandungan berkaitan data dalam komponen akan dipaparkan dengan lancar.

3. Operasi pada DOM

Fungsi kitaran hayat yang dipasang juga boleh digunakan untuk melaksanakan operasi yang diperlukan pada DOM selepas halaman dimuatkan. Sebagai contoh, selepas halaman dimuatkan, tatal ke kedudukan tertentu elemen selepas butang diklik, fokus pada kotak teks tertentu.

export default {
    mounted(){
        const targetDiv = document.getElementById('scroll-to-this-div');
        window.scrollTo(0, targetDiv.offsetTop);  // 点击'滚动到此'按键后，将窗口滚动到'div'元素的顶部
    }
}

Fungsi kitaran hayat yang dipasang membolehkan pembangun membuat pengubahsuaian atau operasi yang diperlukan pada DOM yang telah dibentangkan kepada pengguna di bawah kawalan kitaran hayat Vue, sekali gus meningkatkan pengalaman pengguna dan interaktiviti antara muka dengan berkesan.

Kesimpulan

Artikel ini terutamanya memperkenalkan penggunaan fungsi kitaran hayat yang dipasang dalam dokumen Vue. Sama seperti telah menemui laut terbuka, pembangun boleh bebas memanipulasi dan mengubah suai DOM dalam fungsi yang dipasang. Sudah tentu, kita tidak boleh melupakan falsafah rangka kerja Vue: adalah penting untuk menyelesaikan masalah dalam dokumen Vue dengan kos serendah mungkin, dan untuk mengekang penggunaan kitaran hayat dan fungsi cangkuk yang lain. Walaupun fungsi kitaran hayat lain dalam Vue tidak dilaksanakan di belakang dipasang, ia membenarkan pembangun mengawal kitaran hayat keseluruhan halaman dengan sempurna sama seperti mereka mengawal Mesin Masa.

Atas ialah kandungan terperinci Penggunaan fungsi kitaran hayat yang dipasang dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!