この記事では、落とし穴や地雷原を回避できるように、Vue3 ファミリ バケットの開発における一般的な問題をいくつか紹介します。
私は最近 Vue3 を使い始めて 3 つのプロジェクトを完了しました。多くの問題に遭遇しました。今日は時間をかけてそれらを整理し、そのうちの 15 件を共有します。より一般的な問題. 基本的に、対応するドキュメントのアドレスが掲載されていますので、他のドキュメントをお読みください ~ 完成した 3 つのプロジェクトは、基本的に Vue3 (セットアップ スクリプト モード) Family Bucket を使用して開発されているため、主にいくつかの側面で要約されています:
(学習ビデオ共有: vue ビデオチュートリアル )
ドキュメント アドレス: https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html
Vue2.x および Vue3.x のライフ サイクルメソッドの変更は非常に大きいので、最初に見てみましょう:
現在、Vue3.x は引き続き Vue2.x のライフサイクルをサポートしていますが、メソッドとメソッドを混在させることはお勧めできません。ライフサイクルの初期段階では 2.x を使用できますが、後で 3.x ライフサイクル開発を使用してみてください。
私は script-srtup
モードを使用しているため、Vue3.x のライフサイクル機能を直接使用しています。
// A.vue\ <script setup>\ import { ref, onMounted } from "vue";\ let count = ref<number>(0);\ \ onMounted(() => {\ count.value = 1;\ })\ </script>
各フックの実行タイミングは、次のようにすることもできます。ドキュメントを参照してください: v3.cn.vuejs.org/guide/insta…
ドキュメントアドレス: v3.cn.vuejs.org/api/sfc-scr…
ここでは主にその方法を紹介します。親コンポーネントは子コンポーネントを取得します。コンポーネント内で定義された変数については、親子コンポーネント通信に関して、詳細についてはドキュメントを参照してください: v3.cn.vuejs.org/guide/compo…
グローバル コンパイルを使用できます。ツール マクロの defineExpose マクロは、子コンポーネントのパラメーターを親コンポーネントに公開し、
{key: vlaue}# を使用します。 ## メソッドをパラメータとして、親コンポーネントがテンプレートを渡します ref メソッドを使用してサブコンポーネントのインスタンスを取得すると、対応する値を取得できます: <pre class="brush:js;toolbar:false;">// 子组件\
<script setup>\
let name = ref("pingan8787")\
defineExpose({ name }); // 显式暴露的数据,父组件才可以获取\
</script>\
\
// 父组件\
<Chlid ref="child"></Chlid>\
<script setup>\
let child = ref(null)\
child.value.name //获取子组件中 name 的值为 pingan8787\
</script></pre>
:
script-setup モードでは、defineProps、defineEmits、defineExpose、withDefaults を含む合計 4 つのマクロが提供されます。
ドキュメント: グローバル コンパイルデバイス マクロはまだ詳しく紹介されていませんが、このセクションでは
defineProps と withDefaults を紹介します。
defineProps マクロは、次のようにコンポーネントの入力パラメータを定義するために使用できます。
<script setup>\ let props = defineProps<{\ schema: AttrsValueObject;\ modelValue: any;\ }>();\ </script>
props# の schema と # のみを定義します。 ## ここに属性 ##modelValue2 つの属性タイプ、
defineProps この宣言の欠点は、props のデフォルト値を設定する方法が提供されていないことです。
実際には、withDefaults マクロを使用してこれを実現できます。
<script setup>\ let props = withDefaults(\ defineProps<{\ schema: AttrsValueObject;\ modelValue: any;\ }>(),\ {\ schema: [],\ modelValue: ''\ }\ );\ </script>
withDefaults 補助関数は、デフォルト値の型チェックを提供し、返された props の型が宣言されたデフォルト value 属性のオプションのフラグ。
4. グローバル カスタム パラメーターの構成
在 Vue2.x 中我们可以通过 Vue.prototype
添加全局属性 property。但是在 Vue3.x 中需要将 Vue.prototype
替换为 config.globalProperties
配置:
// Vue2.x\ Vue.prototype.$api = axios;\ Vue.prototype.$eventBus = eventBus;\ \ // Vue3.x\ const app = createApp({})\ app.config.globalProperties.$api = axios;\ app.config.globalProperties.$eventBus = eventBus;
使用时需要先通过 vue 提供的 getCurrentInstance
方法获取实例对象:
当我们在使用 v-model
指令的时候,实际上 v-bind
和 v-on
组合的简写,Vue2.x 和 Vue3.x 又存在差异。
Vue2.x
在子组件中,如果要对某一个属性进行双向数据绑定,只要通过 this.$emit('update:myPropName', newValue)
就能更新其 v-model
绑定的值。
script-setup
模式下就不能使用 this.$emit
去派发更新事件,毕竟没有 this
,这时候需要使用前面有介绍到的 defineProps、defineEmits 两个宏来实现:
父组件使用的时候就很简单:
Vue3.x 对于一些开发过程中的异常,做了更友好的提示警告,比如下面这个提示:
这样能够更清楚的告知异常的出处,可以看出大概是 <elinput>这边的问题,但还不够清楚。这时候就可以添加 Vue3.x 提供的<strong>全局异常处理器</strong>,更清晰的<strong>输出错误内容和调用栈信息,代码如下</strong>:</elinput>
这时候就能看到输出内容如下:
一下子就清楚很多。当然,该配置项也可以用来集成错误追踪服务 Sentry 和 Bugsnag。推荐阅读:Vue3 如何实现全局异常处理?
当我们在控制台输出 ref
声明的变量时。
会看到控制台输出了一个 RefImpl
对象:
看起来很不直观。我们都知道,要获取和修改 ref
声明的变量的值,需要通过 .value
来获取,所以你也可以:
这里还有另一种方式,就是在控制台的设置面板中开启 「Enable custom formatters」选项。
image.png
image.png
这时候你会发现,控制台输出的 ref
的格式发生变化了:
更加清晰直观了。
##このメソッドは「Vue.js の設計と実装」で発見しましたが、ドキュメントには関連する紹介が見つかりませんでした。見つけた人はぜひお知らせください~
ドキュメント アドレス:webpack を使用する学生は、webpack では
require.context:
##Vite では、次の 2 つの方法を使用してファイルを動的にインポートできます:
#import.meta.glob
このメソッドで一致するファイルは、デフォルトでは dynamic import を通じて実装されます。ビルド時に、独立したチャンクを 分離します。これは asynchronous import は、非同期操作が必要な Promise を返します。使用方法は次のとおりです。
##import.meta.globEager
このメソッドは
すべてのモジュールを直接インポートしています。返された結果は、for メソッドを通じて直接操作できます。 ... ループの使用法は次のとおりです。
2. Vite 設定エイリアス タイプ エイリアス
Vite の設定も非常に簡単で、プロジェクトがより複雑な場合、一部のコードを簡略化するためにエイリアス パスのエイリアスを構成することが必要になることがよくあります。
vite.config.ts
resolve.alias: # で設定するだけです。
##TypeScript を使用している場合、エディターはパスが存在しないという警告を表示します⚠️。この時点で、
compilerOptions.paths の構成を追加できます。
:) など:いつ scss で設定されたテーマ変数 ($primary など)、mixin メソッド (
など) を使用する必要がある場合@mixin 行
scss テーマ設定ファイルは
# で設定できます。 ##css.preprocessorOptions.scss.AdditionalData:
scss 構成ファイルを使用したくない場合は、scss コードを直接記述することもできます。
1. スクリプト セットアップ モードでルーティング パラメータを取得する
モードなので、# はありません##thisを直接渡すことはできません。ルーティング パラメータを取得する必要がある場合は、次のようには使用できますが、ルーティング パラメータを取得してルートをジャンプするために this.$router または
this. $route
vue-router が提供する
useRoute メソッドを使用してパラメータを取得できます。<p> ルート ジャンプを行う場合は、<code>useRouter
メソッドの戻り値を使用してジャンプできます。
ドキュメント アドレス: pinia.vuejs.org/core- concep…
ストア変数を分解してからストア上の変数の値を変更すると、ビューは更新されません:
現時点では、ボタンをクリックして changeName
イベントをトリガーしても、ビュー上の name
は変更されていません。これは、ストアが反応性のオブジェクトであり、構造が破壊されるとその反応性が失われるためです。したがって、直接分解することはできません。この場合、Ponia が提供する storeToRefs
ツール メソッドを使用できます。これも非常に簡単に使用できます。storeToRefs
を通じて、分解する必要があるオブジェクトをラップするだけです。
この方法で値を変更すると、ビューはすぐに更新されます。
公式 Web サイトの計画によると、現時点では 3 つの方法でデータを変更できます:
store.属性名
割り当てを通じて単一データのステータスを変更する;
このメソッドは前のセクションで使用されています:
$patch
メソッドを使用して複数のデータのステータスを変更します。
ドキュメントアドレス: pinia .vuejs.org/api/interfa…
複数のデータのステータスを同時に変更する必要がある場合、依然として
上記の記述に問題はありませんが、Pinia の公式 Web サイトには、$patch
を使用すると次のように記述されています。より効率的でパフォーマンスが向上するため、複数のデータを変更する場合は、$patch
を使用することをお勧めします。使用方法も非常に簡単です:
action
メソッドを使用して複数のストロークを変更します。データのステータス;
次のメソッドを定義することもできます。更新するストア内のアクション:
使用時:
これら 3 つのメソッドは、ストアのデータ ステータスを更新できます。ピニアにあるお店。
新しくインストールされた element-Plus開発段階では正常であり、警告は表示されませんが、パッケージ化プロセス中に、コンソールに次の警告内容が出力されます:
公式で読みました。長年の問題: github.com/element-plu…
vite.config.ts
で charset: false
を設定してみてください、結果も無効です:
公式問題で最終的に解決策が見つかりました:
ドキュメントのアドレス: element-plus.gitee.io/zh-CN/guide…
element-plus のデフォルトのコンポーネントは英語です:
中国語言語パックを導入し、それを ElementPlus 構成に追加することで、中国語に切り替えることができます。
現時点では、コンポーネントのテキストがElementPlusでは中国語になります。
上記は、最近の 3 つのプロジェクトの開始から実際の Vue3 ファミリー バケットに至るまでの、落とし穴回避の経験をまとめたものです。それらの多くはドキュメントで紹介されていますが、最初はよくわかりません。また、皆さんにもドキュメントをもっと読んでいただければ幸いです~
Vue3 スクリプト セットアップ モードは、作成すればするほど人気が高まります。
この記事の内容について質問がある場合は、どなたでもコメントして議論してください。
[推奨関連ビデオ チュートリアル: vuejs エントリ チュートリアル、Web フロントエンド エントリ]