今日、私は問題を共有したいです🤯 私はVue 2からVue 3にプロジェクトを変更したときに得た.

Vue 3への私のトップ3の問題

カスタムコンポーネントのV - Modelの使用

フィルタの使用

外部コンポーネントの使用

カスタムコンポーネントにv - modelを使う

Vue 2の場合はサポートしていたv-model カスタムコンポーネントではinput イベント.私はあなたに例を示しましょう、私たちはDatePicker コンポーネント

<DatePicker v-model="date"></DatePicker>

<!-- In Vue2, would be shorthand for:-->
<DatePicker :value="date" @input="date = $event" />

ご覧の通りv-model="date" に変換される:value="date" @input="date = $event" . あなたが使う限りvalue そして、input カスタムコンポーネントのイベントはすべてうまくいくはずです.
ところで、日付モデルは次のようになります.

const date = {
  month: 05,
  year: 2020
}

かなり簡単ですが、Vue 3に変換する場合は、これはもう動作しません.
私を誤解しないでください、私は新しい方法が好きですv-model 作品私は大きな改善です、しかし、上記のコードはどんなエラーも引き起こさないでしょう、そして、あなたがそれを知らないならば、デバッグするのは難しいですv-model Vue 3では異なる動作をする.
もっと読むことができますhere なぜ彼らはそれを変更する理由と使用方法v-model , しかし、短いバージョンは、あなたがupdate:[modelName] イベント、入力イベント、および使用modelName カスタムコンポーネントでvalue .
これを作成したdatepickerコンポーネントに表示しましょう.

<DatePicker v-model="date"></DatePicker>

<!-- would be shorthand for: -->
<DatePicker
  :modelValue="date"
  @update:modelValue="date = $event"
/>

ここでの利点は、この変更を知った後で、複数のV - Model ' sを使用することです.

// two v-model attributes
<DatePicker v-model:month="date.month" v-model:year"date.year"></DatePicker>

構文は以下のようになります.

2 .フィルタの使用

Vue 3フィルタで削除されます!これは、修正するのは難しいことではなく、すべてのファイルを🥵 とフィルタを変更いくつかの時間がかかった.
フィルタのパイプがJavaScriptビット単位演算子と衝突するという事実は、フィルタ付きの式が有効でないことを意味します.そういうわけで、推薦は代わりにメソッドを使用しています.

// Vue 2 Syntax
{{ name | firstLetterUp }}

// Vue 3 Alternative
{{ firstLetterUp(name) }}

これの欠点は、複数の方法を連鎖させることは、複数のフィルタを連鎖させるほど優雅ではないということである.

// Vue 2 Syntax
msg | uppercase | reverse

// Vue 3 Alternative
reverse(uppercase(msg))

外部コンポーネントの使用

ほとんどのコンポーネントは、グローバルAPIを使用して登録するための一般的な実践ですVue.use 登録する.
ここでの問題は、グローバルAPIがVue 3Vue.use メソッドが動作しなくなり、コンポーネントの大部分が壊れます.
VUE 3をサポートするのを待つ必要があるので、アプリケーションに外部コンポーネントがたくさんある場合には大きな問題になります.
私は個人的に、私はいくつかのコンポーネントをforkし、変更を自分で作った.

結論

これらはトップ3です🤕 問題は、私はいくつかの小さなものを持っていたが、ここに含めるのに十分な重要ではなかった.
しかし、私はあなたの最高の問題はVue 3に切り替えていた好奇心旺盛ですか?コメントを教えてください.

読書ありがとうございます！

私が助けることができる何かがあるならば、出てください.チェックアウトマイblog より多くの記事のために、さえずりの上で私について来てください
良い一日を!