基本的な仕組み

Vue3ではdataの値を表示するだけではなく、値が変更されると表示も自動で更新される。
それを利用して時間の経過と共にカウントが増えていく処理を実行する。

<body>
    <h1>Count App</h1>
    <div id="countApp">
      {{ message }}
    </div>

    <script>
      const countData = {
        data() {
          return {
            message: 'カウント： 0',
            count: 0
          }
        },
        mounted() {
          setInterval(() => {
            this.count++
            this.message = 'カウント： ' + this.count
          }, 1000)
        }
      }

      Vue.createApp(countData).mount('#countApp')
    </script>
</body>

ブラウザで表示すると毎秒カウントが増えていく。

コードの解説

JavaScriptのタイマー処理には「setTimeout」と「setInterval」の2種類がある。

setTimeout … 指定した時間後に一度だけ処理する
setInterval … 指定した時間毎に何度も処理する

今回は「setInterval」の関数を利用して一定時間毎に繰り返し処理を行う。
記述方法は以下。

setInterval( 関数 , ミリ秒 )

dataは用意された値をreturnで返す。
今回はmessageとcountという2つの値を用意する。

message: 'カウント： 0',
count: 0

mountedはアプリケーションを読み込んだ際に自動で実行される処理を用意する。
関数の中でcountを1つずつ増やしていき、その値をmessageへ設定する処理を行う。

this.count++
this.message = 'カウント： ' + this.count

「createApp」メソッドはVue3のアプリケーションとなるオブジェクトを生成する。
アプリケーションを生成したら、「mount」メソッドで指定のエレメントにアプリケーションをマウントする。

変数 = Vue.createApp( データ )
アプリケーション.mount( エレメント )

このように、dataに用意されている値を変更することで、{{}}内の表示も自動で更新される。

Vue3のカウント処理

基本的な仕組み

コードの解説