Vue 3とTypescript入門: RFSと反応性


Previously, Vue 3とTypeScriptがどのように遊ぶかの表面をひっかいた.Vueの反応性行動とテンプレート参照に深く潜りましょう.我々は理論のビットを開始し、独自のオーディオプレーヤーコンポーネントを構築します🎶.

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では、反応性はVuedata . これが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/
  • フォルダを作成するiconssrc/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());
    

    それで?空の関数は何ですか?


    私は驚きを台無しにしたくない.それで、私と耐えてください.
    これまでのところ、
  • refsと計算された小道具を学ぶために
  • 反応データをタイプする方法
  • どのようにリファレンスを-との対話-ネイティブaudio 元素
  • 私は今、あなた自身がまだ空の関数のロジックを書く勇気があります.あなたがどこかに立ち往生するならば、チェックしてくださいmy solutions . しかし、私はあなたがあなたがそれを直接経験したとき、ずっとあなたのデータを入力する利益を見ると思っています.
    忠告の最後の言葉
  • 用途VSCode + the Vue Language Features (formerly Volar) extension フルVue + tsの収穫を収穫する
  • 入力するevent.target.value イベントコールバック内で
  • +(ev.target as HTMLInputElement).value;