Vue3.x がリリースされてから長い時間が経ち、新しいパッケージングツール vite を含め、関連エコシステムが徐々に登場してきました。vue3.0 を学習する過程で、いくつかの実用的な API 比較があります。開発中のデモンストレーションを示し、対応する API を正確に使用してプロジェクト開発を完了したいと考えています。 ライフサイクルの変化setup 関数は 2 つのライフサイクル関数 beforeCreate と created を置き換えるので、その実行時間は beforeCreate と create の間であると想定できることに注意してください。
Vue3 を学んだ友人は、setup 関数が使用されるようになったことを知っています。setup 関数でのデータの操作を説明するには、例を使用する方が良いでしょう。 反応的なリアクティブ メソッドは、レスポンシブなデータ オブジェクトを作成するために使用されます。この API は、defineProperty を通じて Vue2 がデータの応答性を実装する際の問題も解決します。 使い方は非常に簡単で、データをパラメータとして渡すだけです。 <テンプレート> <div id="アプリ"> <!-- 4. レスポンシブ データ オブジェクト内のアクセス数 --> {{ 状態.count }} </div> </テンプレート> <スクリプト> // 1. vueからreactiveをインポートする 'vue' から {reactive} をインポートします エクスポートデフォルト{ 名前: 'アプリ'、 設定() { // 2. レスポンシブなデータオブジェクトを作成する const state = reactive({count: 3}) // 3. テンプレートで使用するためのレスポンシブデータオブジェクトの状態を返す return {state} } } </スクリプト> 参照setup 関数を導入するときに、ref 関数を使用してレスポンシブなデータ オブジェクトをラップしました。表面的には、reactive と同じ機能があるように見えます。実際、ref は reactive を介してオブジェクトをラップし、その値をオブジェクトの value 属性に渡すため、似ています。これにより、アクセスするたびに .value を追加する必要がある理由も説明されます。 ref(obj) は reactive({value: obj}) と単純に理解できます。 <スクリプト> 'vue' から {ref, reactive} をインポートします。 エクスポートデフォルト{ 名前: 'アプリ'、 設定() { 定数オブジェクト = {数: 3} 定数state1 = ref(obj) 定数state2 = リアクティブ(obj) コンソールログ(状態1) コンソールログ(状態2) } } </スクリプト> 注: ここでの .value は、setup 関数で ref によってラップされたオブジェクトにアクセスする場合にのみ必要です。コンパイル時に ref によってラップされているかどうかが自動的に識別されるため、テンプレート テンプレートでアクセスする場合は必要ありません。 では、ref と reactive をどのように選択すればよいのでしょうか?
vue2.x では ref を使用して要素タグを取得します。vue3.x で要素タグを取得したい場合はどうすればよいでしょうか?<テンプレート> <div> <div ref="el">div 要素</div> </div> </テンプレート> <スクリプト> 'vue' から { ref, onMounted } をインポートします エクスポートデフォルト{ 設定() { // DOM 参照を作成します。名前は要素の ref 属性名と同じである必要があります。const el = ref(null) // ターゲット要素はマウント後にのみelを通じて取得できます onMounted(() => { el.value.innerHTML = 'コンテンツが変更されました' }) // 作成された参照を返す return {el} } } </スクリプト> 要素を取得する操作は、次の手順に分かれています。
補足: 設定された要素参照変数はコンポーネントがマウントされた後にのみアクセスできるため、マウント前の要素に対する操作は無効です。もちろん、コンポーネント要素を参照すると、コンポーネントのインスタンス オブジェクトが取得されます。 参照toRef は、オブジェクト内の値をレスポンシブ データに変換します。2 つのパラメータを受け取ります。最初のパラメータは obj オブジェクトで、2 番目のパラメータはオブジェクト内のプロパティ名です。 <スクリプト> // 1. toRefをインポートする 'vue' から { toRef } をインポートします エクスポートデフォルト{ 設定() { 定数オブジェクト = {数: 3} // 2. obj オブジェクトの属性 count の値をレスポンシブ データに変換します。const state = toRef(obj, 'count') // 3. テンプレートで使用するために toRef でラップされたデータ オブジェクトを返します。 return {state} } } </スクリプト> 上に ref と toRef がありますが、競合しませんか?これら 2 つの効果は異なります。 <テンプレート> <p>{{ 状態1 }}</p> <button @click="add1">追加</button> <p>{{ 状態2 }}</p> <button @click="add2">追加</button> </テンプレート> <スクリプト> 'vue' から {ref, toRef} をインポートします。 エクスポートデフォルト{ 設定() { 定数オブジェクト = {数: 3} 定数state1 = ref(obj.count) 定数state2 = toRef(obj, 'count') 関数add1() { 状態1.値++ console.log('元の値:', obj); console.log('レスポンシブデータオブジェクト:', state1); } 関数add2() { 状態2.値++ console.log('元の値:', obj); console.log('レスポンシブデータオブジェクト:', state2); } {state1、state2、add1、add2} を返します。 } } </スクリプト> ref は元のデータのコピーであり、元の値には影響しません。同時に、レスポンシブ データ オブジェクトの値が変更されると、ビューも同期的に更新されます。 参照渡されたオブジェクト内のすべての属性の値をレスポンシブなデータ オブジェクトに変換します。この関数は、1 つのパラメータ、obj オブジェクトをサポートします。 <スクリプト> // 1. toRefs をインポートする 'vue' から { toRefs } をインポートします エクスポートデフォルト{ 設定() { 定数オブジェクト = { 名前: 「フロントエンドインプレッション」 年齢: 22歳 性別: 0 } // 2. objオブジェクトの属性countの値をレスポンシブデータに変換します。const state = toRefs(obj) // 3. console.log(state) を印刷して確認する } } </スクリプト> 返されるのは、パッケージ化された各レスポンシブデータオブジェクトを含むオブジェクトです。 浅い反応性この API の名前が示すように、これは浅いリアクティブ API です。元のリアクティブ API が深いということでしょうか? はい、これはパフォーマンス最適化のための API です。 <スクリプト> <テンプレート> <p>{{state.a} } </p> <p>{{ state.first.b }}</p> <p>{{ state.first.second.c }}</p> <button @click="change1">変更 1</button> <button @click="change2">変更 2</button> </テンプレート> <スクリプト> 'vue' から { shallowReactive } をインポートします。 エクスポートデフォルト{ 設定() { 定数オブジェクト = { a: 1、 初め: { b: 2, 2番目: { 3: 3 です } } } const 状態 = shallowReactive(obj) 関数change1() { 状態.a = 7 } 関数change2() { 状態.first.b = 8 状態.第一.第二.c = 9 コンソールログ(状態); } {状態} を返す } } </スクリプト> まず、2番目のボタンをクリックして、2番目のレイヤーのbと3番目のレイヤーのcを変更しました。値は変更されましたが、ビューは更新されませんでした。 最初のボタンをクリックして最初のレイヤーの a を変更すると、ビュー全体が更新されます。 これは、shallowReactive が最初の層の属性の値を監視し、変更されるとビューを更新することを示しています。 浅い参照これは、shallowReactive のようなパフォーマンス最適化のために使用される浅い参照です。triggerRef で呼び出されると、ビューはすぐに更新できます。更新する必要がある参照オブジェクトであるパラメーター state を受け取ります。 shallowReactive は、オブジェクトの最初のレイヤーのデータの変更を監視してビューの更新を駆動し、shallowRef は .value の変更を監視してビューを更新します。 <テンプレート> <p>{{state.a} } </p> <p>{{ state.first.b }}</p> <p>{{ state.first.second.c }}</p> <button @click="change">変更</button> </テンプレート> <スクリプト> 'vue' から {shallowRef, triggerRef} をインポートします。 エクスポートデフォルト{ 設定() { 定数オブジェクト = { a: 1、 初め: { b: 2, 2番目: { 3: 3 です } } } 定数状態 = shallowRef(obj) コンソールにログ出力します。 関数変更() { 状態.値.最初.b = 8 状態.値.最初.2番目.c = 9 // 値を変更したら、ビューを駆動してtriggerRef(state)をすぐに更新します console.log(状態); } {状態、変更} を返す } } </スクリプト> 生のtoRaw メソッドは、ref または reactive オブジェクトの生データを取得するために使用されます。 <スクリプト> 'vue' から {reactive, toRaw} をインポートします。 エクスポートデフォルト{ 設定() { 定数オブジェクト = { 名前: 「フロントエンドインプレッション」 年齢: 22 } 定数状態 = リアクティブ(obj) 定数raw = toRaw(状態) console.log(obj === raw) // 真 } } </スクリプト> 上記のコードは、toRaw メソッドがリアクティブ オブジェクトから元のデータを取得することを証明しているため、ビューを更新せずに元のデータの値を変更することで、パフォーマンスの最適化を簡単に行うことができます。 注: さらに、toRawメソッドで受け取ったパラメータがrefオブジェクトの場合、元のデータオブジェクトを取得するには.valueを追加する必要があります。 マークRawmarkRaw メソッドは、元のデータを非応答としてマークできます。ref または reactive でラップされていても、データの応答性は実現できません。このメソッドは、元のデータを 1 つのパラメータとして受け取り、マークされたデータを返します。値を変更してもビューは更新されない、つまりデータの応答性が実装されていない <テンプレート> <p>{{ 状態名 }}</p> <p>{{ 状態.年齢 }}</p> <button @click="change">変更</button> </テンプレート> <スクリプト> 'vue' から {reactive, markRaw} をインポートします。 エクスポートデフォルト{ 設定() { 定数オブジェクト = { 名前: 「フロントエンドインプレッション」 年齢: 22 } // 元のデータ obj を markRaw でマークして、データの更新が追跡されないようにする const raw = markRaw(obj) // レスポンシブデータにするために、raw を reactive でラップします。const state = reactive(raw) 関数変更() { 状態.年齢 = 90 コンソールにログ出力します。 } {状態、変更} を返す } } </スクリプト> ウォッチエフェクトwatchEffect と watch の主な違いは次のとおりです。
<スクリプト> 'vue' から {reactive, watchEffect} をインポートします。 エクスポートデフォルト{ 設定() { const 状態 = リアクティブ({ カウント: 0、名前: 'zs' }) ウォッチエフェクト(() => { コンソールログ(状態数) console.log(状態名) /* 初期化中に印刷: 0 ず 1 秒後に次のように出力されます: 1 ls */ }) タイムアウトを設定する(() => { 状態.count++ 状態名 = 'ls' }, 1000) } } </スクリプト> 依存関係をウォッチ メソッドに渡す代わりに、コールバック関数が直接指定されます。 コンポーネントが初期化されると、コールバック関数が1回実行され、検出する必要があるデータ(state.countとstate.name)が自動的に取得されます。 上記の特性に基づいて、どのリスナーを使用するかを選択できます。 現在のインスタンスを取得するVue2 のどのコンポーネントでも、現在のコンポーネントのインスタンスを取得したい場合は、これを使用して取得できることは誰もが知っています。Vue3 では、多くのコードが setup 関数で実行され、この関数では、 this は undefined を指します。では、現在のコンポーネントのインスタンスを取得するにはどうすればよいでしょうか。この時点では、別のメソッド、つまりgetCurrentInstanceを使用することができます。 <テンプレート> <p>{{ 数値 }}</p> </テンプレート> <スクリプト> 'vue' から {ref, getCurrentInstance} をインポートします。 エクスポートデフォルト{ 設定() { 定数num = ref(3) 定数インスタンス = getCurrentInstance() console.log(インスタンス) {num} を返す } } </スクリプト> たとえば、必要なのは ctx プロパティと proxy プロパティです。 ctxとproxyの内容は非常に似ていることがわかりますが、後者は前者の外側にproxyのレイヤーでラップされており、proxyが応答性があることを示しています。 使用ストアVue2 で Vuex を使用する場合、this.$store を通じて Vuex インスタンスを取得しますが、前の部分で Vue2 で this を取得する方法が異なると説明しましたが、Vue3 の getCurrentInstance().ctx には $store 属性が見つかりませんでした。では、どのようにして Vuex インスタンスを取得するのでしょうか。これにはvuexのuseStoreメソッドが必要です。 // ストアフォルダ内のindex.js 'vuex' から Vuex をインポートします const ストア = Vuex.createStore({ 州: { 名前: 「フロントエンドインプレッション」 年齢: 22 }, 突然変異: … }, … }) // 例.vue <スクリプト> // vuex から useStore メソッドをインポートします。import {useStore} from 'vuex' エクスポートデフォルト{ 設定() { // vuexインスタンスを取得する const store = useStore() コンソール.log(ストア) } } </スクリプト> その後は通常どおり vuex を使用できます。 以上がvue3のよく使われるAPIの使い方の紹介の詳しい内容です。vueのよく使われるAPIの使い方についてもっと知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
>>: Docker Composeのデプロイと基本的な使い方の詳しい説明
目次複雑なクエリとステップバイステップのクエリクエリステートメントを分割する共同クエリの分解問題のあ...
第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...
違い: 1. InnoDB はトランザクションをサポートしていますが、MyISAM はサポートしてい...
以前、カスタム関数を使用して MySQL でツリー構造を再帰的にクエリする方法についての記事を書きま...
HTML はタグと属性で構成されており、これらを組み合わせてブラウザにページの表示方法を指示します。...
Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...
この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...
<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...
iノードとは何ですか? inode を理解するには、まずファイル ストレージから始める必要があります...
目次序文v-model の修飾子:怠け者トリム番号さまざまな入力タイプやその他の要素での v-mod...
関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...
1. はじめに:ウェブページにフラッシュ コンテンツを正常に表示したい場合は、ページ上のフラッシュ ...
基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...
目次序文ブラウザJS非同期実行の原理ブラウザのイベントループ実行スタックとタスクキューマクロタスクと...
MySQL 5.7.9 のインストールチュートリアルを録画してみんなと共有しましょう環境の紹介:オペ...