Vue 3とTypescript入門: RFSと反応性
18057 ワード
Previously, Vue 3とTypeScriptがどのように遊ぶかの表面をひっかいた.Vueの反応性行動とテンプレート参照に深く潜りましょう.我々は理論のビットを開始し、独自のオーディオプレーヤーコンポーネントを構築します🎶.
反応変数の値を追跡できます.それはあなたの犬の襟にロケータを置くようなものだ.移動するたびに、デバイスのgeodataの更新.次に、それに応じて行動することができます.おそらく、彼らは迷って、あなたはそれらを取得する必要があります.
Vue 2では、反応性はVue
組成APIを使用して反応データの作成はまだ簡単です.つの関数をインポートします
ライク
HTML要素を参照する代わりに
その理論を考えれば、これを実行しましょう.我々は、上記を組み込むために超簡単なオーディオプレーヤー要素を作成します.
次のようになります.
これから始めなさいGithub repos . ローカルマシンにクローンしてください. クリエイト フォルダを作成する 以下のボイラープレートのコードを取得し、それぞれのファイルに追加します
このGISTのコードは、コンポーネントのレイアウトとスタイルを提供します.我々は、ネイティブを使用します
[
オーディオプレーヤーVueコンポーネントのための空のボイラー板
オーディオプレーヤーVueコンポーネント- AppAudioPlayerのための空のboilerplate.Vue
(財)
(https://gist.github.com/tq-bit/f875737869bc16adbc3515aca22f05d3 )
私たちはから微調整のアイコンを使用しますHeroicons オーディオプレーヤーをより親しみやすくするために.次のファイル名の下に追加します.
いくつかの変数は
私たちは かなり簡単です.結果を以下に示します.
ユーザーが新しいURLを設定するたびに
最後に、ネイティブのオーディオ要素にデータをリンクしなければなりません.ユーザーがコンポーネントと対話するとき、それはプレイバックの責任があります.
必要なことは三つあります. テンプレートからオーディオプレーヤーの参照をつかむ オーディオプレーヤのライフサイクル法へのフック オーディオプレーヤーとコンポーネントの同期
つまり、オーディオDOMノードをコンポーネント内のオブジェクトとして利用できるようにします
オーディオ要素を発するevents そのライフサイクル中または内部の値が変化する.これらを購読することができます-またはこれらにフック-私たち自身のロジックを適用します.考慮する他の特徴がありますが、これらの2つに焦点を合わせましょう. 内部の持続時間とコンポーネントの再生時間を同期しなければなりません オーディオプレーヤーのトラックがいつ終わるか知っておかなければならない だから私たちは
たぶん、あなたは3番目の輸入方法に気づいた
私は驚きを台無しにしたくない.それで、私と耐えてください.
これまでのところ、 refsと計算された小道具を学ぶために 反応データをタイプする方法 どのようにリファレンスを-との対話-ネイティブ 私は今、あなた自身がまだ空の関数のロジックを書く勇気があります.あなたがどこかに立ち往生するならば、チェックしてくださいmy solutions . しかし、私はあなたがあなたがそれを直接経験したとき、ずっとあなたのデータを入力する利益を見ると思っています.
忠告の最後の言葉 用途VSCode + the Vue Language Features (formerly Volar) extension フルVue + tsの収穫を収穫する 入力する
You can find the code in this repos' branch 'refs-and-reactivity'
反応性
反応変数の値を追跡できます.それはあなたの犬の襟にロケータを置くようなものだ.移動するたびに、デバイスのgeodataの更新.次に、それに応じて行動することができます.おそらく、彼らは迷って、あなたはそれらを取得する必要があります.
If you'd like to learn more about reactivity, check out this article or the official Vue 3 docs
Vueの反応性
Vue 2では、反応性はVue
data
. これがVue 3のためにまだ有効である間、この記事の残りは、ネイティブに実装された構成APIに集中します.反応データ
組成APIを使用して反応データの作成はまだ簡単です.つの関数をインポートします
ref
値をラップします.Vueでは、型を宣言することができます.<script setup lang="ts">
import { ref } from 'vue';
const count = ref<number | null>(0);
const increment = () => count.value++;
</script>
Note that to access or mutate count, you must access it by its
.value
property
計算のプロパティ
ライク
ref
, 畝computed
Vueインスタンスの等価物を置き換えます.依存する変数が変わるたびに、それは再実行する単一の関数を受け入れます.見てみましょう<script setup lang="ts">
import { ref, computed } from 'vue';
const count = ref<number | null>(0);
const increment = () => count.value++;
const doubleCount = ref<number>computed(() => count.value * 2)
</script>
無効なHTML要素
HTML要素を参照する代わりに
this.$refs
, 輸入品を使うref
ラッパー.選択された要素は本当に反応しません.しかし、ノード、すべてのプロパティ、およびメソッドに直接アクセスできます.<script setup lang="ts">
import { ref } from 'vue';
const audioPlayerElement = ref<HTMLAudioElement | null>(null);
</script>
<template>
<audio ref="audioPlayerElement">
<source type="audio/mpeg" />
</audio>
</template>
オーディオプレーヤーコンポーネントを構築しましょう
その理論を考えれば、これを実行しましょう.我々は、上記を組み込むために超簡単なオーディオプレーヤー要素を作成します.
次のようになります.
これから始めなさいGithub repos . ローカルマシンにクローンしてください.
AppAudioPlayer.vue
コンポーネントsrc/components/
icons
下src/components/
appaudioplayer。Vue
このGISTのコードは、コンポーネントのレイアウトとスタイルを提供します.我々は、ネイティブを使用します
audio
要素とスタイルをラッピングすることができます.[
オーディオプレーヤーVueコンポーネントのための空のボイラー板
オーディオプレーヤーVueコンポーネント- AppAudioPlayerのための空のboilerplate.Vue
(財)
(https://gist.github.com/tq-bit/f875737869bc16adbc3515aca22f05d3 )
アイコン
私たちはから微調整のアイコンを使用しますHeroicons オーディオプレーヤーをより親しみやすくするために.次のファイル名の下に追加します.
iPlay。Vue
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon"
fill="transparent"
viewBox="0 0 24 24"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
/>
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</template>
ipauseVue
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</template>
無効データを宣言する
いくつかの変数は
AppAudioPlayer.vue
ファイル.const currentAudioFileSource = null;
const previousAudioFileSource = null;
const playbackTime = null;
const audioDuration = null;
const isPlaying = null;
currentAudioFileSource
and previousAudioFileSource
最初にconstと宣言されるDEFAULT_AUDIO_ADDRESS
playbackTime
オーディオファイルの再生時間を監視し、0として初期化されるaudioDuration
現在のファイルの持続時間を保持します.として初期化Infinity
isPlaying
プレーヤーが現在実行しているかどうかを示すconst currentAudioFileSource = ref<string>(DEFAULT_AUDIO_ADDRESS);
const previousAudioFileSource = ref<string>(DEFAULT_AUDIO_ADDRESS);
const playbackTime = ref<number>(0);
const audioDuration = ref<number>(Infinity);
const isPlaying = ref<boolean>(false);
計算されたプロパティを宣言する
ユーザーが新しいURLを設定するたびに
currentAudioFileSource
. しかし、新しいソースが古いものと異なる場合だけ.audioSourceChanged
現在のオーディオソースが前のconst audioSourceChanged = computed<boolean>(
() => previousAudioFileSource.value !== currentAudioFileSource.value
);
オーディオ要素を登録する
最後に、ネイティブのオーディオ要素にデータをリンクしなければなりません.ユーザーがコンポーネントと対話するとき、それはプレイバックの責任があります.
必要なことは三つあります.
プレーヤーの参照を宣言する
つまり、オーディオDOMノードをコンポーネント内のオブジェクトとして利用できるようにします
script
. 定数の名前がテンプレートリファレンスaudioPlayerElement
.const audioPlayerElement = ref<HTMLAudioElement | null>(null);
プレーヤーのライフサイクルメソッドにフックする
オーディオ要素を発するevents そのライフサイクル中または内部の値が変化する.これらを購読することができます-またはこれらにフック-私たち自身のロジックを適用します.考慮する他の特徴がありますが、これらの2つに焦点を合わせましょう.
ontimeupdate
and onended
イベント.const registerAudioPlayer = (): void => {
if (audioPlayerElement.value) {
audioPlayerElement.value.ontimeupdate = () => {
audioDuration.value = audioPlayerElement.value?.duration || Infinity;
playbackTime.value = audioPlayerElement.value?.currentTime || 0;
};
audioPlayerElement.value.onended = () => {
isPlaying.value = false;
};
}
};
プレーヤーとコンポーネントの同期
たぶん、あなたは3番目の輸入方法に気づいた
vue
- onMounted
. それはlifecycle methods - またはライフサイクルフック-コンポーネントが通過します.ここでは、コンポーネントを内部のオーディオ要素と同期させるために使用します.onMounted(() => registerAudioPlayer());
それで?空の関数は何ですか?
私は驚きを台無しにしたくない.それで、私と耐えてください.
これまでのところ、
audio
元素忠告の最後の言葉
event.target.value
イベントコールバック内で+(ev.target as HTMLInputElement).value;
Reference
この問題について(Vue 3とTypescript入門: RFSと反応性), 我々は、より多くの情報をここで見つけました https://dev.to/tqbit/an-introduction-to-vue-3-and-typescript-refs-and-reactivity-8nhテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol