Cara memanggil fungsi semasa pemulaan Vue3
Fungsi panggilan permulaan Vue3
createApp({}).mount(‘#app')
Masukkan fail runtime-dom/src/index.tx
createApp -> createRenderer -> fungsi render dan satu siri fungsi rendering) -> createAppAPI (mengembalikan kaedah createApp sebenar), mengembalikan apl instance,
dan kemudian app.mount("#app" ) - > createVNode -> render(vnode,rootcontainier,isSVG) -> prosesComponent -> >
Untuk setupComponent, sama ada terdapat fungsi persediaan atau tidak, ia akan diproses secara berasingan Jika ada, gunakan fungsi persediaan untuk memprosesnya dan parameter lain yang perlu dihantar ke fungsi persediaan, hubungi persediaan, setupComponent->finishComponentSetup (dalam Ini akan mengendalikan pilihan permulaan versi 2.x),- Untuk setupRenderEffect, laksanakan satu siri fungsi cangkuk hayat, buat pemaparan ReactiveEffect dan laksanakan **effect.run()* *Kaedah
- ReactiveEffect
adalah serupa dengan Watcher vue2.x, dikira, menonton componentUpdateFn juga menggunakan ReactiveEffect semasa proses pemaparan,
After const effect = new ReactiveEffect(fn,…), sebagai tambahan kepada atribut yang dikira, effect.run() akan dipanggil hanya apabila ia diakses ->Panggil fn(), akses pembolehubah responsif dalam fn dan kumpulkan Dependencies, setupRenderEffect, watch, watchEffect yang lain akan memanggil effect.run() selepas mencipta ReactiveEffect untuk mengumpul dependencies, antaranya
- akan mengakses pembolehubah respons bersandar
-
setupRenderEffect
, akan melaksanakan fungsi untuk mengakses sumber, mengumpul dependensi watch(source,cb,options)
, akan secara automatik melaksanakan fn sekali untuk mengumpul tanggungan watchEffect(fn)
, antaranya pilihan mempunyai pilihan lazy:true, yang bermaksud fungsi fn tidak dilaksanakan serta-merta untuk mengumpul tanggungan , dan fungsi run dikembalikan, panggil run() sekali lagi dan fungsi fn dilaksanakan sekali untuk mengumpul kebergantungan-
effect(fn,options)
Proses permulaan program Vue3// 1.计算属性 // computed.ts // ComputedRefImpl类构造函数调用了new ReactiveEffect this.effect = new ReactiveEffect(getter, () => { if (!this._dirty) { this._dirty = true triggerRefValue(this) } }) // 2. effect // effect.ts // effect函数中,可以接收第二个参数effect(fn,{lazy:true}),表示不立即执行 const _effect = new ReactiveEffect(fn) // 3. apiWatch.ts doWatch方法 // watch和watchEffect都是通过doWatch函数来,在这里调用new ReactiveEffect,然后根据不同情况执行effect.run(),对于watchEffect就是//执行器回调,对于watch就是访问监听的数据,然后收集依赖 const effect = new ReactiveEffect(getter, scheduler) // 4. render.ts //在 setupRenderEffect中 const effect = (instance.effect = new ReactiveEffect( componentUpdateFn,//更新组件函数 () => queueJob(update), instance.scope // track it in component's effect scope ))
Salin selepas log masuk
Penghias fungsi dan kelas disokong dengan baik dalam TypeScript Menggunakan panggilan fungsi boleh menyokong TypeScript dengan lebih baik, dengan itu meningkatkan sokongan jenis
3. Api komponen akar, seperti data dan anak API komponen kekal dalam format yang sama, dan pelekap ditukar daripada $mount ke mount, yang memudahkan API dan menyatukan konsistensi API
4. Kaedah pemasangan dalam Vue baharu akan menyebabkan pencemaran global dan tidak boleh bebas , createApp boleh bebas antara satu sama lain dan dipasang atas permintaan.
Pelaksanaan Proses
lekapkanconst Vue = { createApp(options) { //返回app实例 return { mount(selector){ // 获取渲染函数,编译结果 // 渲染dom,追加到宿主元素 } compile(template){ //返回render return function render(){ //描述视图 } } } } }
Apabila memanggil createApp, jika tiada render dalam pilihan, mulakan komponen dan panggil compile untuk menjana render . Jika terdapat pemaparan, lekapkannya terus; Dalam Vue2, menambah elemen menggunakan kaedah perbandingan dan penggantian untuk membandingkan dan menilai perbezaan antara elemen berbeza Dalam Vue3, elemen akan dipadamkan dan ditambah semula secara langsung .
Pembolehubah responsif boleh ditakrifkan dalam persediaan atau data, dan persediaan mempunyai keutamaan yang lebih tinggi.
createAppDua fungsi permulaan yang didedahkan oleh Vue, createApp dan createRenderer, dan hubungan panggilan antara mereka 1. Pengguna memanggil kaedah createApp => Dapatkan pemapar melalui ensureRenderer 3. Contoh program akan ditakrifkan dalam fungsi createApp Methods, seperti mount, get, set, use, mixin, dsb. 4. Kaedah mount instance akan menyemak sama ada terdapat komponen root yang dipasang dan kaedah yang hendak digunakan untuk mounting (spa/ssr) 5 Kaedah render memanggil kaedah tampalan untuk menampal 6 Kaedah tampalan menentukan kaedah pemasangan berdasarkan jenis nod masuk kali pertama, ia akan dipasang pada komponen, dan kemudian elemen( Kaedah tampalan akan menukar vnod menjadi nod nod) 7 Kaedah tampalan melaksanakan kaedah prosesKomponen dalaman, dan akhirnya melaksanakan kaedah mountComponent, yang merupakan kaedah pelaksanaan terakhir $mount dalam Vue2 Proses permulaan 1 Instantiation komponen root: panggil createComponentInstance 3 Pasang fungsi kesan sampingan fungsi pemaparan: setupRendererEffect Dalam Vue3, pemerhati telah dibatalkan dan digantikan dengan fungsi kesan sampingan Fungsi kesan sampingan akan dilaksanakan semula setiap kali data responsif berubah Pelaksanaan fungsi pemaparan dalaman akan mencetuskan pengumpulan pergantungan perubahan data responsif, respons Komponen akan dikemas kini. PS: Perbezaan daripada useEffect in react ialah useEffect memerlukan pengumpulan kebergantungan manual, manakala effect() dalam Vue akan mengumpul kebergantungan secara automatik. Atas ialah kandungan terperinci Cara memanggil fungsi semasa pemulaan Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!/*暴露给Vue的createApp*/
function createApp(options){
const renderer = Vue.createRenderer({
/*定义一些平台特有的api,一些实例*/
aaa(){},
bbb(){}
})
/*用户调用的createApp,实际上是渲染器的createApp*/
return renderer.createApp()
}
function createRenderer({aaa,bbb}){
/*获得渲染器*/
/*这个createApp是函数内部的*/
return createApp(options){
/*挂载逻辑*/
return {
/*返回App实例*/
}
}
}
2 Pemapar memanggil createRender => ※Panggil fungsi kilang baseGreateRenderer, dan lain-lain akhirnya akan mengembalikan render digunakan untuk membuat halaman spa, hydrate digunakan untuk menyuntik air ke dalam halaman ssr, dan terdapat fungsi createApp (berbeza daripada createApp Vue)
2 kaedah setupComponent, iaitu kaedah ini.$_init dalam Vue2, untuk menggabungkan pilihan dan menetapkan Cangkuk dan responsif

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Penggunaan vue3+vite:src memerlukan pengimportan imej secara dinamik dan laporan ralat dan penyelesaian vue3+vite secara dinamik Jika vue3 dibangunkan menggunakan skrip taip, akan terdapat mesej ralat untuk keperluan untuk memperkenalkan imej tidak boleh digunakan :require(' .../assets/test.png') diimport kerana typescript tidak menyokong require, jadi import digunakan Berikut ialah cara menyelesaikannya: gunakan awaitimport

tinymce ialah pemalam editor teks kaya yang berfungsi sepenuhnya, tetapi memperkenalkan tinymce ke dalam vue tidak selancar seperti pemalam teks kaya Vue yang lain tidak sesuai untuk Vue dan @tinymce/tinymce-vue perlu diperkenalkan. dan Ia adalah pemalam teks kaya asing dan belum melepasi versi Cina Anda perlu memuat turun pakej terjemahan dari tapak web rasminya (anda mungkin perlu memintas tembok api). 1. Pasang kebergantungan yang berkaitan npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2 Muat turun pakej Cina 3. Perkenalkan pakej kulit dan Cina Buat folder tinymce baharu dalam folder awam projek dan muat turun

Vue melaksanakan bahagian hadapan blog dan perlu melaksanakan penghuraian markdown Jika terdapat kod, ia perlu melaksanakan penyerlahan kod. Terdapat banyak pustaka parsing markdown untuk Vue, seperti markdown-it, vue-markdown-loader, marked, vue-markdown, dsb. Perpustakaan ini semuanya sangat serupa. Ditanda digunakan di sini, dan highlight.js digunakan sebagai pustaka penonjolan kod. Langkah-langkah pelaksanaan khusus adalah seperti berikut: 1. Pasang perpustakaan bergantung Buka tetingkap arahan di bawah projek vue dan masukkan arahan berikut npminstallmarked-save//marked untuk menukar markdown ke htmlnpmins.

Untuk mencapai muat semula separa halaman, kami hanya perlu melaksanakan pemaparan semula komponen setempat (dom). Dalam Vue, cara paling mudah untuk mencapai kesan ini ialah menggunakan arahan v-if. Dalam Vue2, selain menggunakan arahan v-if untuk memaparkan semula dom setempat, kami juga boleh mencipta komponen kosong baharu Apabila kami perlu memuat semula halaman setempat, lompat ke halaman komponen kosong ini dan kemudian masuk semula pengawal beforeRouteEnter dalam komponen kosong. Seperti yang ditunjukkan dalam rajah di bawah, cara mengklik butang muat semula dalam Vue3.X untuk memuatkan semula DOM dalam kotak merah dan memaparkan status pemuatan yang sepadan. Memandangkan pengawal dalam komponen dalam sintaks persediaan skrip dalam Vue3.X hanya mempunyai o

Selepas projek vue3 dibungkus dan diterbitkan ke pelayan, halaman akses memaparkan kosong 1. PublicPath dalam fail vue.config.js diproses seperti berikut: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='pengeluaran'?'./':'/&

Prakata Sama ada ia adalah vue atau react, apabila kita menghadapi berbilang kod berulang, kita akan memikirkan cara untuk menggunakan semula kod ini, dan bukannya mengisi fail dengan sekumpulan kod berlebihan. Malah, kedua-dua vue dan react boleh mencapai penggunaan semula dengan mengekstrak komponen, tetapi jika anda menemui beberapa serpihan kod kecil dan anda tidak mahu mengekstrak fail lain, sebagai perbandingan, react boleh digunakan dalam yang sama Isytiharkan widget yang sepadan dalam fail , atau laksanakannya melalui fungsi render, seperti: constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Kesan terakhir ialah memasang komponen VueCropper yarnaddvue-cropper@next Nilai pemasangan di atas adalah untuk Vue3 Jika ia adalah Vue2 atau anda ingin menggunakan kaedah lain untuk merujuk, sila lawati alamat npm rasminya. Ia juga sangat mudah untuk merujuk dan menggunakannya dalam komponen Anda hanya perlu memperkenalkan komponen yang sepadan dan fail gayanya. Saya tidak merujuknya secara global di sini, tetapi hanya memperkenalkan import{userInfoByRequest}from'../js/api. ' dalam fail komponen saya import{VueCropper}dari'vue-cropper&

Menggunakan Vue untuk membina elemen tersuai WebComponents ialah nama kolektif untuk satu set API asli web yang membenarkan pembangun mencipta elemen tersuai yang boleh diguna semula (customelements). Faedah utama elemen tersuai ialah ia boleh digunakan dengan mana-mana rangka kerja, walaupun tanpa satu. Ia sesuai apabila anda menyasarkan pengguna akhir yang mungkin menggunakan tindanan teknologi bahagian hadapan yang berbeza, atau apabila anda ingin mengasingkan aplikasi akhir daripada butiran pelaksanaan komponen yang digunakannya. Vue dan WebComponents ialah teknologi pelengkap, dan Vue menyediakan sokongan yang sangat baik untuk menggunakan dan mencipta elemen tersuai. Anda boleh menyepadukan elemen tersuai ke dalam aplikasi Vue sedia ada, atau menggunakan Vue untuk membina
