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)

  // 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
      ))

  Proses permulaan program Vue3

Permulaan

Vue 3 tidak lagi menggunakan kaedah Vue() baharu Vue2 untuk pemulaan program, tetapi menggunakan kaedah createApp. Apa yang berlaku dalam createApp?

Sebab untuk menulis semula

createApp ialah fungsi kilang dalam Vue, yang diimport dan dipanggil sebagai fungsi. Kelebihan pendekatan berfungsi ialah

1 Ia menghapuskan kaedah statik yang pada asalnya dipasang pada Vue dan mengubahnya menjadi kaedah contoh, yang boleh mengurangkan penggunaan memori, memudahkan penggeraan pokok dan mengurangkan volum pembungkusan;

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

lekapkan

const 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.

createApp

Dua fungsi permulaan yang didedahkan oleh Vue, createApp dan createRenderer, dan hubungan panggilan antara mereka

/*暴露给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实例*/
        }
    }
}

Proses kod sumber

1. Pengguna memanggil kaedah createApp => Dapatkan pemapar melalui ensureRenderer

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)

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

2 kaedah setupComponent, iaitu kaedah ini.$_init dalam Vue2, untuk menggabungkan pilihan dan menetapkan Cangkuk dan responsif

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!