Zenn
Open3

Vue.js V3 の Composition API 忘れたときに見るスクラップ

takumikunn15takumikunn15

Data (Reactive Variables)

import { ref } from 'vue'
const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0
takumikunn15takumikunn15

Method

import { ref } from 'vue'
const counter = ref(0)

console.log(counter.value) // 0

const increment = () => ++counter.value

increment()

console.log(counter.value) // 1
takumikunn15takumikunn15

Computed

import { ref, computed } from 'vue'
const counter = ref(1)

const twiceTheCounter = computed(() => counter.value * 2)

console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2