Vue スキャフォールディングでのレンダリングを理解する

Vue スキャフォールディングでは、エントリ ファイル main.js の新しい Vue コードに、コード レンダリング h=>h(App); があることがわかります。

このコードは、Vueを使用するときに通常使用するコードとは異なります。一般的なVueコードを記述します。

	「../Acomponent」からAcomponentをインポートします。
	vm = 新しいVue({
		el:"#アプリ"
		データ（）{
			戻る {
				a:"ああ",
				b:"bbb"
			}
		},
		テンプレート:`<div>
			<span>これはテストです</span>
			<コンポーネント></コンポーネント>
		</div>`,
		コンポーネント:{
			コンポーネント
		}
	})

上記のコードは、私たちが普通に理解できるコードです。テンプレートがあり、テンプレート内に他のコンポーネントを導入することができます。しかし、なぜスキャフォールディングに render メソッドがあるのでしょうか?

私たち自身のアイデアによれば、スキャフォールディングコードを変更して、

スキャフォールディングを開始し、npm run serve を実行して結果を確認します。エラーが報告されます。情報は次のとおりです。

したがって、スキャフォールディングによって導入された Vue は、テンプレート パーサーのない Vue であると言えます。テンプレートを解析する場合は、render 関数を使用してプロジェクトの node_modules フォルダーに移動し、導入された Vue を確認する必要があります。

'vue' から Vue をインポートします

vue/distファイルを開くと、図に示すように多くのファイルが表示されます。

エラーメッセージには、解決方法が 2 つあると表示されています。1 つは完全な vue.js を導入すること、もう 1 つは render を使用することです。
フルバージョンをインポートして、問題が解決するかどうかを確認しましょう。

2番目を見てみましょう。テンプレートパーサーなしで、renderを使ってVueを導入します。
まずはレンダリングについて話しましょう
Render は、ノードを作成するために使用される 1 つのパラメータを持つ関数です。

console.logから、パラメータcreateElementも関数であり、VNodeオブジェクトを作成することがわかります。

次に矢印関数を使ってレンダリングを簡素化します

	レンダリング(要素を作成){
		createElement("h1","123") を返します。
	}
	//矢印関数を使用してレンダリングを簡素化します:(createElement)=>{return createElement("h1","123")}
	// 矢印関数にはパラメータが 1 つしかないので、括弧を書く必要はありません。メソッド本体が 1 行しかない場合は、中括弧を書く必要はなく、戻り値に return を書く必要もありません。
	//上記のコードは次のように簡略化できます:createElemnet=>crementElement("h1","123")
	//同様に、createElement は元々カスタマイズされており、名前を変更することもできます render: h=>h("h1","123")
	// これはスキャフォールディングのコードと非常によく似ています。h 関数では、ネイティブ HTML タグの場合はこのように記述します。Vue コンポーネントの場合は、直接渡すことができます。必要なのは render:h=>h(App) だけです。

レンダリングの書き方はこうだ

スキャフォールディングが不完全な Vue を導入して使用する理由についてお話ししましょう。Vue コードが完成したらパッケージ化する必要があり、Vue のコア コードは不可欠であることがわかっています。パッケージ化した後は、テンプレートを再度解析する必要はありません。すると、Vue のコア コード内のテンプレート パーサーはまったく必要ありません。そのため、コードのサイズを縮小するために、Vue はテンプレート パーサーを削除しましたが、開発時に再度使用する必要があるため、テンプレートを解析するためのレンダリング メソッドを作成します。
つまり、パッケージ化されたコードをできるだけ小さくすることが目的です。

これで、Vue スキャフォールディングでのレンダリングの理解に関するこの記事は終了です。Vue レンダリングの理解に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。