Bagaimana cara menjalankan kode VueJS hanya setelah Vue dimuat dan diinisialisasi sepenuhnya?
Saya sedang mengerjakan komponen Vue yang akan ditempatkan di beberapa situs web melalui sistem CMS. Masalah yang saya hadapi adalah meskipun urutan pemuatan skrip js saya sudah benar, terkadang saya mendapatkan kesalahan ini:
Uncaught ReferenceError: Vue is not defined
at HTMLDocument.<anonymous>Vue dimuat melalui cdn dan berada di atas kode komponen.
Semua kode Vue dijalankan seperti ini:
document.addEventListener("DOMContentLoaded", () => {
// here is the Vue code
});Saya bahkan menambahkan setTimeout() di dalam event DOMContentLoaded dan masih tidak berhasil.
window.onload = function() juga tidak bekerja dalam semua kasus. Saya masih mendapatkan kesalahan itu dari waktu ke waktu.
Skrip dimuat di dalam badan.
Apakah Anda punya ide apa yang bisa menjadi pendekatan lain? Saya ingin memastikan bahwa pada saat kode Vue ditembakkan, Vue dimuat dan siap untuk diinisialisasi pada halaman. Terima kasih!
gunakan vue mounted() untuk menjalankan kode apa pun saat halaman dimuat, dan updated() untuk dijalankan setelah operasi komponen apa pun, jadi solusi yang sempurna adalah menggabungkan Roy j dan vue lifecycle hooks
mounted() {
window.addEventListener('load', () => {
// run after everything is in-place
})
},
// 99% using "mounted()" with the code above is enough,
// but incase its not, you can also hook into "updated()"
//
// keep in mind that any code in here will re-run on each time the DOM change
updated() {
// run something after dom has changed by vue
}perhatikan bahwa Anda dapat menghilangkan window.addEventListener() dan itu masih akan bekerja tetapi mungkin meleset + jika Anda menggunakan sesuatu seperti jquery outerHeight(true) lebih baik menggunakannya di dalam event jendela untuk memastikan Anda mendapatkan nilai yang benar.
Pembaruan 1:
alih-alih window.addEventListener('load') ada juga cara lain dengan menggunakan document.readyState sehingga hal di atas bisa menjadi
mounted() {
document.onreadystatechange = () => {
if (document.readyState == "complete") {
// run code here
}
}
},Update 2:
cara yang paling dapat diandalkan yang saya temukan sejauh ini adalah menggunakan debounce pada $nextTick, sehingga penggunaannya menjadi
import debounce from 'lodash/debounce'
// bad
updated() {
this.$nextTick(debounce(() => {
console.log('test') // runs multiple times
}, 250)) // increase to ur needs
}
// good
updated: debounce(function () {
this.$nextTick(() => {
console.log('test') // runs only once
})
}, 250) // increase to ur needsketika menggunakan debounce dengan updated akan menjadi rumit, jadi pastikan untuk mengujinya sebelum melanjutkan.
Pembaruan 3:
Anda juga dapat mencoba MutationObserver
Gunakan event load untuk menunggu sampai semua sumber daya selesai dimuat:
<script>
window.addEventListener("load", function(event) {
// here is the Vue code
});
</script>
DOMContentLoadedadalah event yang ditembakkan ketika HTML diurai dan dirender dan DOM dibangun. Biasanya ditembakkan cukup cepat dalam seumur hidup aplikasi. Di sisi lain,loadhanya ditembakkan ketika semua sumber daya (gambar, stylesheet, dll.) diambil dari jaringan dan tersedia untuk aplikasi. jaringan dan tersedia untuk browser.
Anda juga dapat menggunakan event load untuk skrip tertentu.
