Vue3 の初期化中に関数を呼び出す方法

Vue3 初期化呼び出し関数

createApp({}).mount(‘#app')

エントリ ファイル runtime-dom/src/index.tx

• createApp -> createRenderer -> createBaseRenderer (ここでも作成されます render)関数と一連のレンダリング関数) -> createAppAPI (実際の createApp メソッドを返す)、インスタンス アプリ

• を返し、次に app.mount("#app" ) -> ; createVNode -> render(vnode,rootcontainer,isSVG) -> patch -> processComponent -> mountComponent (初期レンダリング) または updateComponent ->(createComponentInstance, setupComponent,setupRenderEffect)

• setupComponent の場合、setup 関数の有無は別扱いになります、ある場合は setup 関数を使用して処理します setup 関数に渡す必要のある props やその他のパラメータを初期化します setup を呼び出します、setupComponent->finishComponentSetup (これはバージョン 2.x のオプションの初期化を処理します)、

• setupRenderEffect の場合、一連のライフ フック関数を実行し、レンダリング ReactiveEffect を作成し、実行します**effect.run()* *Method

ReactiveEffect

は vue2.x の Watcher に似ており、computed、watch、componentUpdateFn も実行中に ReactiveEffect を使用します。レンダリング プロセス、

const effect = new ReactiveEffect(fn,…)、アクセスされると、計算された属性に加えて、effect.run() が呼び出されます ->Call fn() 、fn の応答変数にアクセスし、依存関係を収集します。setupRenderEffect、watch、watchEffect の残りの部分は、ReactiveEffect を作成した後、effect.run() を呼び出して依存関係を収集します。その中で

• # #setupRenderEffect は依存する応答変数にアクセスします

• watch(source,cb,options) はソースにアクセスして依存関係を収集する関数を実行します

• watchEffect(fn)、fn を自動的に実行して依存関係を収集します

• ##effect(fn, options)

  、ここで options には、依存関係を収集するために fn 関数をすぐに実行しないことを示す、lazy:true オプションがあり、run 関数を返し、run() を再度呼び出し、fn 関数を 1 回実行して、依存関係を収集します#

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

  Vue3 プログラム初期化プロセス

Initialization

Vue 3 では、プログラムの初期化に Vue2 の新しい Vue() メソッドは使用されなくなり、createApp メソッドが使用されます。 createAppでは何が起こるのでしょうか?

書き換えの理由

createApp は Vue のファクトリ関数であり、関数としてインポートされて呼び出されます。関数型スタイルの利点は次のとおりです。

1. Vue に元々実装されていた静的メソッドを削除し、インスタンス メソッドに変えることで、メモリ使用量を削減し、ツリーシェイキングを容易にし、パッケージ化ボリュームを削減できます。

関数デコレータとクラス デコレータは TypeScript で十分にサポートされています。関数呼び出しを使用すると TypeScript をより適切にサポートできるため、型サポートが向上します

3. データや子などのルート コンポーネントの APIコンポーネントは同じ形式のままで、マウントは $mount から mount に変更され、API が簡素化され、API の一貫性が統一されます

4. 新しい Vue のマウント方法は世界的な汚染を引き起こすため、実装できません。独立した 、createApp は互いに独立してオンデマンドでマウントできます。

プロセスの実装

mount

const Vue = {
	createApp(options) {
		//返回app实例
		return {
			mount(selector){
				// 获取渲染函数，编译结果
				// 渲染dom，追加到宿主元素
			}
			compile(template){
			//返回render
				return function render(){
					//描述视图
				}
			}
		}
	}
}

createApp を呼び出すとき、オプションに render がない場合、コンポーネントは初期化され、コンパイルが呼び出されて生成されます。レンダーがある場合は直接マウントします;

Vue2 では、要素の追加は比較置換方式を使用して、diff 要素間の違いを比較して判断します。Vue3 では、要素は削除されて再実行されます。 -直接追加しました。

リアクティブ変数はセットアップまたはデータで定義でき、セットアップの方が優先されます。

createApp

Vue によって公開される 2 つの初期化関数、createApp と createRenderer、それらの間の呼び出し関係

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

ソース コード プロセス

1. ユーザーは createApp メソッドを呼び出します =》 ensureRenderer を通じてレンダラーを取得します

##2. レンダラーは createRender=》を呼び出します※ファクトリ関数のbaseGreateRendererを呼び出します. この関数はパッチ、差分などを定義し、最終的に返されるレンダリングはスパ ページのレンダリングに使用され、ハイドレートは ssr ページに水を注入するために使用され、関数 createApp (Vue の createApp とは異なります)

3 があります。関数 createApp では、プログラムのインスタンスは、mount、get、set、use、mixin などのメソッドが定義されます。

4. マウント インスタンス メソッドは、ルート コンポーネントがマウントされているかどうか、およびどのメソッドを使用するかを確認します。マウント (spa/ssr)

5. レンダー メソッドは、パッチを適用するためにパッチ メソッドを呼び出します

6. パッチ メソッドは、受信ノード タイプに基づいてマウント方法を決定します。初回はコンポーネントにマウントされ、次に element(patch メソッドは vnode をノード ノードに変換します)

7. patch メソッドは内部 processComponent メソッドを実行し、最後に mountComponent メソッドを実行します。これが Vue2 の $mount の最後の実行メソッドです。

初期化処理

1. ルート コンポーネントのインスタンス化: createComponentInstance

2. ルート コンポーネントの初期化: call setupComponent メソッド (Vue2 の this.$_init メソッド) を使用して、オプションをマージし、フックと応答性を設定します。

3. レンダー関数の副作用関数をインストールします: setupRendererEffect

Vue3 では、ウォッチャーはキャンセルされ、副作用関数に置き換えられました。副作用関数は、応答データが変更されるたびに再実行されます。内部レンダー関数の実行により依存関係の収集がトリガーされるため、応答データが変更されると、応答コンポーネントが更新されます。

PS: React の useEffect との違いは、useEffect では依存関係を手動で収集する必要があるのに対し、Vue のeffect() は依存関係を自動的に収集することです。

以上がVue3 の初期化中に関数を呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。