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

// 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: 増加
   },
   状態数
  ）
 }
}

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

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

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

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

<テンプレート>
 <ラベル>
  <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="私のクラス" />
</ラベル>