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 でコマンドまたはプロセスの実行時間を調べる方法

推薦する

docker を使用して Linux 環境に Springboot パッケージをデプロイするチュートリアル

springboot には tomcat サーバーが組み込まれているため、jar パッケージにパッケ...

WeChatミニプログラム抽選コンポーネントの使い方

WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...

最新のmysql-5.7.21のインストールと設定方法

1. ダウンロードしたMySQLの圧縮パッケージをインストールディレクトリに解凍します。 2. 新し...

Vue 親コンポーネントが子コンポーネント関数の実装を呼び出す

Vue親コンポーネントは子コンポーネントの関数を呼び出す親コンポーネントはイベントを通じて子コンポー...

VMwareでCentOSがインターネットにアクセスできない問題を素早く解決

昨日、VMware に CentOS7 をインストールしました。Tomcat パッケージを転送するた...

Vue における v-for のキーの一意性の詳細な説明

目次1. DOM の違い2. 同じレイヤーの同じタイプの要素にキー属性を追加する3. キーはインデッ...

Vue の foreach 配列と js の traversal 配列の書き方の説明

Vue foreach配列を記述し、jsで配列をトラバースする方法シナリオVueでAxiosを使用し...

Linux サーバー上のローカル静的リソースにアクセスするために nginx を使用する方法

1. ポート 80 が占有されているかどうかを確認します。通常、ポート 80 は Apache サー...

WeChatアプレットシングルページアプリケーションルーティングを徹底的に理解するための10分

シングルページアプリケーションの特徴「前提:」Web ページには、クリックするとサイト内の他のページ...

MySql 8.0.11-Winxp64 (無料インストール版) ​​設定チュートリアル

1. インストールディレクトリにzipパッケージを解凍します。まず、mysql-8.0.11-win...

Tomcat でよく使われるフィルターの詳細な説明

目次1. クロスドメインフィルタ CorsFilter 1.1 設定例1.2 パラメータの説明2. ...

Ubuntu 16.04 で Python 3 を使用して Django プロジェクトを作成し、実行する方法

ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...

CSS3 でテキスト ストロークを実装する 2 つの方法 (要約)

質問最近、以下に示すように、テキストストローク効果を実現するという要件に遭遇しました。 解決策1まず...

初心者のためのMySQL外部キーの設定方法

目次外部キーの役割mysql 外部キー設定方法要約する外部キーの役割データの一貫性、整合性を維持し、...

パーティショニングを使用して数十億のデータに対する MySQL データ処理を最適化する方法

MySQL が数千万のデータをクエリする場合、ほとんどのクエリ最適化の問題はインデックスを通じて解決...