setup()関数とリアクティブな変数

setup()のエントリーポイント

refでリアクティブな状態を作成する

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

reactiveでリアクティブなオブジェクトを作成する

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

状態をテンプレートに返す

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

テンプレートでの自動アンラップ

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

関数を追加する

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

テンプレートで接続する

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

thisキーワードは不要

setupは作成前に実行される

setupの引数：propsとcontext

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

完全なミニコンポーネント

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

理解度チェック

まとめ