Composition APIのリアクティビティーの基礎を勉強する

ja.vuejs.org

Composition APIの勉強のため、こちらのドキュメントを読んでみます。

Composition API では、リアクティブな状態を宣言する方法として、ref() 関数を使用することを推奨します:

js
import { ref } from 'vue'

const count = ref(0)

ref() は、引数を受け取り、それを .value プロパティを持つ ref オブジェクトにラップして返します:

js
const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

ここまでで書かれていることは大体理解できました。

コンポーネントのテンプレート内で ref にアクセスするには、下記に示すように、コンポーネントの setup() 関数で宣言し、それを返します:

js
import { ref } from 'vue'

export default {
  // `setup` は、Composition API 専用の特別なフックです。
  setup() {
    const count = ref(0)

    // ref をテンプレートに公開します
    return {
      count
    }
  }
}

template <div>{{ count }}</div>

テンプレート内で ref を使用する際、.value をつける必要はないことに注意してください。便利のよいように、ref はテンプレート内で使用されると自動的にアンラップされます（いくつかの注意点があります）。

テンプレートで使う際は.valueをつけなくて良いという仕様も慣れればさほど問題ではなさそう。

注意点については以下に書かれています。

ja.vuejs.org

イベントハンドラーで直接 ref を変更することもできます:

template
<button @click="count++">
  {{ count }}
</button>

これも理解できました。

より複雑なロジックの場合、同じスコープで ref を変更する関数を宣言し、状態とともにメソッドとして公開できます:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // JavaScript 内では .value が必要
      count.value++
    }

    // 関数も公開することを忘れないでください。
    return {
      count,
      increment
    }
  }
}

公開されたメソッドは、イベントハンドラーとして使用できます:

template

<button @click="increment">
  {{ count }}
</button>

現場ではscriptタグ内にsetupを書く<script setup lang="ts">という形にしているので書き方は多少異なると思いますが、上記で説明されている動きも理解しやすいと感じました。

setup() で状態やメソッドを手動で公開するのは冗長になりがちです。幸い、単一ファイルコンポーネント（SFC） を使用すれば、これを避けられます。

> ```