Vue3 のレンダリング関数における互換性のない変更の詳細な説明

Vue3 のレンダリング関数における互換性のない変更の詳細な説明

レンダリングAPIの変更

この変更は<template>ユーザーに影響しません

  • h はレンダリング関数に引数として渡されるのではなく、グローバルにインポートされるようになりました。
  • レンダリング関数のパラメータが変更され、ステートフルコンポーネントと関数コンポーネント間の一貫性が向上しました。
  • vnode はフラットな prop 構造を持つようになりました

レンダリング関数のパラメータ

// 2.0 レンダリング関数 export default {
 レンダリング(h) {
  h('div') を返す
 }
}

// 3.x 構文 export default {
 与える() {
  h('div') を返す
 }
}

レンダリング関数のシグネチャの変更

// 2.x
エクスポートデフォルト{
 レンダリング(h) {
  h('div') を返す
 }
}

// 3.x
'vue' から { h, reactive } をインポートします
エクスポートデフォルト{
 セットアップ(prop, {スロット, 属性, 出力}) {
  定数状態 = リアクティブ({
   カウント: 0
  })
  関数の増分() {
   状態.count++
  }
  // レンダリング関数に戻る return () => h(
   'div',
   {
    onClick: 増加
   },
   状態数
  )
 }
}

VNode プロパティのフォーマット

// 2.x
{
 クラス: ['button', 'is-outlined'],
 スタイル: {色: '#fffff'},
 属性: {id: '送信'},
 domProps: {innerHTML: ''},
 オン: {クリック: 送信フォーム},
 キー: '送信ボタン'
}
// 3.x VNode構造はフラットです{
 クラス: ['button', 'is-outlined'],
 スタイル: { 色: '#34495E' },
 id: '送信',
 内部HTML: ''、
 onClick: 送信フォーム、
 キー: '送信ボタン'
}

スロット統合

通常のスロットとスコープ付きスロットを変更しました

  • this.$slots はスロットを関数として公開するようになりました
  • これを削除します。$scopedSlots
// 2.x
h(レイアウトコンポーネント、[
 h('div', {スロット: 'header'}, this.header),
 h('div', {スロット: 'header'}, this.header)
])
// スコープスロット:


// 3.x
h(レイアウトコンポーネント、{}、{
 ヘッダー: () => h('div', this.header),
 コンテンツ: () => h('div', this.content)
})
// プログラム的にスコープ付きスロットを導入する必要がある場合、それらは $slots オプションに統合されるようになりました // 2.x スコープ付きスロット
this.$scopedSlots.header
// 3.x ではこれを書きます。$slots.header

$listeners を削除する

$listenersオブジェクトはvue3で削除され、イベントリスナーは$attrsの一部になりました。

Vue2 では、this.attrs と this.attrs および this.listeners を使用して、それぞれコンポーネントに渡される属性とイベント リスナーにアクセスできます。inheritAttrs: false と組み合わせることで、開発者はこれらの属性とリスナーをルート要素ではなく他の要素に適用できます。

<テンプレート>
<ラベル>
 <input type="text" v-bind="$attrs" v-on="$listeners">
</ラベル>
</テンプレート>
<スクリプト>
 エクスポートデフォルト{
  継承属性: false
 }
</スクリプト>

Vue の仮想 DOM では、イベント リスナーは on というプレフィックスが付いた属性になり、attrs オブジェクトの一部になったため、リスナーは削除されます。

<テンプレート>
 <ラベル>
  <input type="text" v-bind="$attrs" />
 </ラベル>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 継承属性: false
}
// このコンポーネントが id 属性と v-on:close リスナーを受け取った場合、$attrs オブジェクトは次のようになります {
 id: 'my-input',
 onClose: () => console.log('close イベントがトリガーされました')
}
</スクリプト>

$attrs にクラスとスタイルが含まれるようになりました

これで$attrにはクラスやスタイルを含むすべての属性が含まれるようになりました

2.xでは、仮想DOMはクラスとスタイルを特別に処理するため、それらは$attrに含まれず、inheritAttr: falseを使用すると副作用が発生します。

  • $attrs 内の属性はルート要素に自動的に追加されなくなりましたが、どこに追加するかは開発者が決定します。
  • ただし、class と style は $attrs に属していないため、コンポーネントのルート要素に適用されます。
<テンプレート>
 <ラベル>
  <input type="text" v-bind="$attrs" />
 </ラベル>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
 継承属性: false
}
</スクリプト>
<!-- 書き込み -->
<my-component id="my-id" class="my-class"></my-component>
<!-- vue2 は以下を生成します -->
<label class="私のクラス">
 <input type="text" id="私のID" />
</ラベル>
<!-- vue3 は以下を生成します -->
<ラベル>
 <input type="text" id="私のID" class="私のクラス" />
</ラベル>

以上がvue3におけるレンダリング機能の非互換な変更についての詳しい説明です。vueレンダリング機能の非互換な変更についての詳細は、123WORDPRESS.COM内の他の関連記事にも注目してください!

以下もご興味があるかもしれません:
  • Vueレンダリング関数renderの使い方の詳しい説明
  • Vueレンダリング機能の詳しい説明
  • Vue で jsx 構文を正しく使用する方法
  • React-vscode で jsx 構文を使用する際の問題と解決策
  • JSX を使用してコンポーネント パーサー開発を構築する例
  • JSX を使用してカルーセル コンポーネントを実装する方法 (フロントエンドのコンポーネント化)
  • Vueコンポーネントjsx構文の具体的な使用
  • Vue jsx の使用ガイドと vue.js での jsx 構文の使用方法
  • Vue が JSX 構文をサポートする方法の詳細な説明
  • レンダリング関数と JSX の詳細

<<:  MySQL 5.7.18 の解凍バージョンをダウンロードしてインストールし、MySQL サービスを開始するための詳細なグラフィック手順

>>:  Linux でコマンドまたはプロセスの実行時間を調べる方法

推薦する

vue+openlayer をベースにマップの集約と散乱効果を実現

目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...

MySQL バッチ挿入ループの詳細なサンプルコード

背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...

docker pruneコマンドは、あまり使用されないデータを定期的にクリーンアップするために使用できます。

目次docker システム df docker システム プルーンNoneオブジェクトをクリーンアッ...

MySQL 5.7.16 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...

HTML ページに画像を挿入し、マップ インデックスを追加する方法の例

1. WEBでサポートされている画像形式: GIF: 256色を保存でき、透明色をサポートし、アニメ...

HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題

HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...

Windows で Nginx を使用して https サーバーとリバース プロキシを構成する際の問題

リクエストロジックフロントエンド --> https経由でnginxをリクエストnginx -...

IDEAでVUEプロジェクトをデバッグするための詳細な手順

js コードをデバッグするには、コード内にデバッガーを記述するか、Chrome で毎回ブレークポイン...

MySQL インデックスの使用方法 (単一列インデックスと複数列インデックス)

1. 単一列インデックスどの列にインデックスを作成するかを選択することは、パフォーマンス最適化プロ...

Mysql のデッドロックの表示とデッドロックの除去の詳細な説明

序文しばらく前にMysqlのデッドロック問題に遭遇したので、解決しました。問題の説明: Mysql ...

DockerでKafkaをデプロイする方法

目次1. Dockerをビルドする2. コンテナに入る3. 設定ファイルを変更する4. Kafkaを...

DockerでMySQLマスタースレーブ環境を構築する方法の詳しい説明

序文この記事では、docker-compose と dockerfile を使用して、binlog ...

Ubuntu 20.04 ダブルピンイン入力方式のインストール手順

1. 中国語入力方法を設定する 2. ダブルスペルモードを設定する 3. 注意事項20.04 で S...

MySQL 外部キー設定方法の例

1. 外部キーの設定方法1. MySQL では、2 つのテーブルを関連付けるために、外部キー (FO...

Linux の一般的な基本コマンドと使用方法

この記事では、一般的な基本的な Linux コマンドとその使用方法を例を使って説明します。ご参考まで...