Vue.js 3 Composition APIã培åºè§£èª¬ãäžçäžã®éçºè åãã«ãåå©çšå¯èœã§ä¿å®ã»ãã¹ãããããVue.jsã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®å®è·µçãªäŸãšãã¹ããã©ã¯ãã£ã¹ãåŠã³ãŸãã
Vue.js 3 Composition API: ã°ããŒãã«éçºè åãã®åŸ¹åºè§£èª¬
Vue.jsã¯ããã®èŠªãã¿ãããåŠç¿æ²ç·ãšåŒ·åãªæ©èœã®ãããã§ãçŸä»£çãªWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®äººæ°ã®ããéžæè¢ãšããŠæ¥éã«æ®åããŸãããVue.js 3ã§ã¯ãã³ã³ããŒãã³ãã®ããžãã¯ãæŽçããæ°ããæ¹æ³ã§ããComposition APIãå°å ¥ããããããããã«é²åãããŸããããã®åŸ¹åºè§£èª¬ã§ã¯ãComposition APIã广çã«çè§£ãæŽ»çšããããã®å æ¬çãªã¬ã€ããæäŸããããä¿å®æ§ãé«ããåå©çšå¯èœã§ããã¹ãããããVueã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããã¹ãã«ã身ã«ã€ããããšãã§ããŸãã
Composition APIãšã¯ïŒ
Composition APIã¯ããªãã·ã§ã³ã宣èšãã代ããã«ãã€ã³ããŒãããã颿°ã䜿çšããŠVueã³ã³ããŒãã³ããäœæã§ããããã«ããAPIã®ã»ããã§ããåºæ¬çã«ã¯ãé¢é£ããããžãã¯ããã³ãã¬ãŒãå
ã®ã©ãã«çŸãããã«é¢ããããäžç·ã«ã°ã«ãŒãåããããšãã§ããŸããããã¯ãã³ãŒããäºåå®çŸ©ãããã«ããŽãªã«åºã¥ããŠæŽçããããšã匷å¶ããOptions APIïŒdata, methods, computed, watchïŒãšã¯å¯Ÿç
§çã§ããOptions APIã¯ã³ãŒãã*ãããäœã*ïŒããŒã¿ãã¡ãœãããªã©ïŒã§æŽçãããã®ãšèããã®ã«å¯ŸããComposition APIã¯ã³ãŒãã*ãããäœãããã*ã§æŽçã§ãããã®ãšèããããšãã§ããŸãã
Composition APIã®äžæ žã¯setup()颿°ãäžå¿ã«å±éãããŸãããã®é¢æ°ã¯ãã³ã³ããŒãã³ãå
ã§Composition APIãå©çšããããã®ãšã³ããªãŒãã€ã³ãã§ããsetup()å
ã§ã¯ããªã¢ã¯ãã£ããªç¶æ
ãç®åºããããã£ãã¡ãœãããã©ã€ããµã€ã¯ã«ããã¯ãã³ã³ããŒã¶ãã«é¢æ°ã䜿çšããŠå®çŸ©ã§ããŸãã
ãªãComposition APIã䜿çšããã®ãïŒ
Composition APIã¯ãç¹ã«å€§èŠæš¡ã§è€éãªã¢ããªã±ãŒã·ã§ã³ã«ãããŠãåŸæ¥ã®Options APIã«æ¯ã¹ãŠããã€ãã®å©ç¹ãæäŸããŸãïŒ
- ã³ãŒãæ§æã®æ¹åïŒ Composition APIã䜿çšãããšãé¢é£ããããžãã¯ãã³ã³ããŒã¶ãã«é¢æ°ã«ã°ã«ãŒãåã§ãããããã³ãŒããããæŽçãããçè§£ãããããªããŸããé¢é£ããã³ãŒããç°ãªãOptions APIã®ããããã£ã«æ£åšããã代ããã«ããã¹ãŠã1ãæã«ãŸãšããããšãã§ããŸããããã¯ãè€æ°ã®æ©èœãå«ãè€éãªã³ã³ããŒãã³ããæ±ãå Žåã«ç¹ã«æçã§ãã
- åå©çšæ§ã®åäžïŒ ã³ã³ããŒã¶ãã«é¢æ°ã¯ãç°¡åã«æœåºããŠè€æ°ã®ã³ã³ããŒãã³ãéã§åå©çšã§ããŸããããã«ãããã³ãŒãã®åå©çšãä¿é²ãããéè€ãæžå°ããããå¹ççãªéçºã«ã€ãªãããŸããããã¯ãã¢ããªã±ãŒã·ã§ã³å šäœã§äžè²«ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãç¶æããããã®ã²ãŒã ãã§ã³ãžã£ãŒã§ãã
- ãã¹ãã®ããããã®åäžïŒ Composition APIã¯ãåã ã®ã³ã³ããŒã¶ãã«é¢æ°ãåç¬ã§ãã¹ãã§ããããã«ããããšã§ãåäœãã¹ãã容æã«ããŸããããã«ããããã°ã®ç¹å®ãšä¿®æ£ã容æã«ãªããããå ç¢ã§ä¿¡é Œæ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãå®çŸããŸãã
- åå®å šæ§ïŒ TypeScriptãšå ±ã«äœ¿çšãããšãComposition APIã¯åªããåå®å šæ§ãæäŸããéçºäžã«æœåšçãªãšã©ãŒããã£ããããŸããããã«ãããã³ãŒãããŒã¹å šäœã®å質ãšä¿å®æ§ãå€§å¹ ã«åäžãããããšãã§ããŸãã
- ããžãã¯ã®æœåºãšåå©çšïŒ Composition APIã䜿çšãããšãã³ã³ããŒãã³ãã®ããžãã¯éšåãç°¡åã«æœåºããŠåå©çšã§ããŸããããã¯ãããŒã¿ãã§ããããã©ãŒã ããªããŒã·ã§ã³ããŠãŒã¶ãŒèªèšŒã®ç®¡çãªã©ãè€æ°ã®ã³ã³ããŒãã³ãã§å ±æããå¿ èŠãããæ©èœãæ±ãå Žåã«ç¹ã«äŸ¿å©ã§ãã
ã³ã¢ã³ã³ã»ããã®çè§£
Composition APIãæ¯ããäž»èŠãªæŠå¿µã«ã€ããŠè©³ããèŠãŠãããŸãããïŒ
1. setup()
åè¿°ã®éããsetup()ã¯Composition APIã䜿çšããããã®ãšã³ããªãŒãã€ã³ãã§ããããã¯ãã³ã³ããŒãã³ããäœæãããåã«å®è¡ãããã³ã³ããŒãã³ããªãã·ã§ã³ã§ããsetup()å
ã§ããªã¢ã¯ãã£ããªç¶æ
ãç®åºããããã£ãã¡ãœãããã©ã€ããµã€ã¯ã«ããã¯ãå®çŸ©ãããã³ãã¬ãŒãã«å
¬éãããå€ãå«ããªããžã§ã¯ããè¿ããŸãã
äŸïŒ
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const increment = () => {
count.value++
}
return {
count,
increment
}
}
}
ãã®äŸã§ã¯ãrefã䜿çšããŠcountãšãããªã¢ã¯ãã£ããªå€æ°ãäœæããŠããŸãããŸããcountã®å€ãå¢ããincrementãšããã¡ãœãããå®çŸ©ããŠããŸããæåŸã«ãcountãšincrementãå«ããªããžã§ã¯ããè¿ããããããã³ã³ããŒãã³ãã®ãã³ãã¬ãŒãã§å©çšã§ããããã«ããŸãã
2. refãšreactiveã«ãããªã¢ã¯ãã£ããªç¶æ
Composition APIã¯ããªã¢ã¯ãã£ããªç¶æ
ãäœæããããã®2ã€ã®äž»èŠãªé¢æ°ãrefãšreactiveãæäŸããŸãã
ref:refã¯ããªããã£ããªå€ïŒæ°å€ãæååãããŒã«å€ãªã©ïŒãåãåãããªã¢ã¯ãã£ãã§å¯å€ãªrefãªããžã§ã¯ããè¿ããŸããå€ã¯refã®.valueããããã£ãéããŠã¢ã¯ã»ã¹ããã³å€æŽãããŸããåäžã®å€ã®å€æŽã远跡ãããå Žåã«äœ¿çšããŸããreactive:reactiveã¯ãªããžã§ã¯ããåãåãããã®ãªããžã§ã¯ãã®ãªã¢ã¯ãã£ããªãããã·ãè¿ããŸãããªã¢ã¯ãã£ããªãªããžã§ã¯ãã®ããããã£ãžã®å€æŽã¯ãã³ã³ããŒãã³ãã®æŽæ°ãããªã¬ãŒããŸãããªããžã§ã¯ãå ã®è€æ°ã®ããããã£ã®å€æŽã远跡ãããå Žåã«äœ¿çšããŸãã
refã䜿çšããäŸïŒ
import { ref } from 'vue'
export default {
setup() {
const message = ref('Hello, Vue!')
const updateMessage = (newMessage) => {
message.value = newMessage
}
return {
message,
updateMessage
}
}
}
reactiveã䜿çšããäŸïŒ
import { reactive } from 'vue'
export default {
setup() {
const state = reactive({
name: 'John Doe',
age: 30
})
const updateName = (newName) => {
state.name = newName
}
return {
state,
updateName
}
}
}
3. computedã«ããç®åºããããã£
ç®åºããããã£ã¯ãä»ã®ãªã¢ã¯ãã£ããªç¶æ
ããæŽŸçããå€ã§ããäŸåé¢ä¿ã倿Žããããã³ã«èªåçã«æŽæ°ãããŸããcomputed颿°ã¯ãã²ãã¿ãŒé¢æ°ãåŒæ°ãšããŠåãåããèªã¿åãå°çšã®ãªã¢ã¯ãã£ããªrefãè¿ããŸãã
äŸïŒ
import { ref, computed } from 'vue'
export default {
setup() {
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => {
return `${firstName.value} ${lastName.value}`
})
return {
firstName,
lastName,
fullName
}
}
}
ãã®äŸã§ã¯ãfullNameã¯firstNameãšlastNameã«äŸåããç®åºããããã£ã§ããfirstNameãŸãã¯lastNameã®ããããã倿ŽããããšãfullNameã¯èªåçã«æŽæ°ãããŸãã
4. watchãšwatchEffectã«ãããŠã©ããã£ãŒ
ãŠã©ããã£ãŒã䜿çšãããšããªã¢ã¯ãã£ããªç¶æ
ã®å€åã«åå¿ã§ããŸããComposition APIã¯ããŠã©ããã£ãŒãäœæããããã®2ã€ã®äž»èŠãªæ¹æ³ãwatchãšwatchEffectãæäŸããŸãã
watch:watchã䜿çšãããšãç£èŠãããªã¢ã¯ãã£ããªäŸåé¢ä¿ãæç€ºçã«æå®ã§ããŸããæåã®åŒæ°ãšããŠ1ã€ä»¥äžã®ãªã¢ã¯ãã£ããªåç §ïŒrefãç®åºããããã£ããŸãã¯ãªã¢ã¯ãã£ããªãªããžã§ã¯ãïŒãåãã2çªç®ã®åŒæ°ãšããŠã³ãŒã«ããã¯é¢æ°ãåããŸããæå®ãããäŸåé¢ä¿ã®ããããã倿Žããããã³ã«ãã³ãŒã«ããã¯é¢æ°ãå®è¡ãããŸããwatchEffect:watchEffectã¯ãã³ãŒã«ããã¯é¢æ°å ã§äœ¿çšããããã¹ãŠã®ãªã¢ã¯ãã£ããªäŸåé¢ä¿ãèªåçã«è¿œè·¡ããŸããã³ãŒã«ããã¯é¢æ°ã¯æåã«å®è¡ããããã®åŸã远跡ãããŠããäŸåé¢ä¿ã®ããããã倿Žããããã³ã«åå®è¡ãããŸããããã¯ãäŸåé¢ä¿ãæç€ºçã«æå®ããã«ãªã¢ã¯ãã£ããªç¶æ ã®å€åã«åºã¥ããŠå¯äœçšãå®è¡ãããå Žåã«äŸ¿å©ã§ãããã ããwatchEffectã¯è¿œè·¡ããäŸåé¢ä¿ãå€ããããšããã©ãŒãã³ã¹ã®åé¡ãåŒãèµ·ããããšããããããæ³šæãå¿ èŠã§ãã
watchã䜿çšããäŸïŒ
import { ref, watch } from 'vue'
export default {
setup() {
const count = ref(0)
watch(
count,
(newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`)
}
)
const increment = () => {
count.value++
}
return {
count,
increment
}
}
}
watchEffectã䜿çšããäŸïŒ
import { ref, watchEffect } from 'vue'
export default {
setup() {
const message = ref('Hello')
watchEffect(() => {
console.log(`Message is: ${message.value}`)
})
const updateMessage = (newMessage) => {
message.value = newMessage
}
return {
message,
updateMessage
}
}
}
5. ã©ã€ããµã€ã¯ã«ããã¯
Composition APIã¯ãonMountedãonUpdatedãonUnmountedãªã©ãonã§å§ãŸã颿°ãéããŠã³ã³ããŒãã³ãã®ã©ã€ããµã€ã¯ã«ããã¯ãžã®ã¢ã¯ã»ã¹ãæäŸããŸãããããã®é¢æ°ã¯ãåŒæ°ãšããŠã³ãŒã«ããã¯ãåãã察å¿ããã©ã€ããµã€ã¯ã«ããã¯ãããªã¬ãŒããããšãã«å®è¡ãããŸãã
äŸïŒ
import { onMounted, onUnmounted } from 'vue'
export default {
setup() {
onMounted(() => {
console.log('Component is mounted')
})
onUnmounted(() => {
console.log('Component is unmounted')
})
return {}
}
}
ã³ã³ããŒã¶ãã«é¢æ°ã®äœæ
Composition APIã®çã®åã¯ãåå©çšå¯èœãªã³ã³ããŒã¶ãã«é¢æ°ãäœæã§ããããšã«ãããŸããã³ã³ããŒã¶ãã«é¢æ°ãšã¯ãã³ã³ããŒãã³ãããžãã¯ã®äžéšãã«ãã»ã«åããè€æ°ã®ã³ã³ããŒãã³ãã§äœ¿çšã§ãããªã¢ã¯ãã£ããªç¶æ ãšé¢æ°ãè¿ãåãªã颿°ã§ãã
äŸïŒããŠã¹ã®äœçœ®ã远跡ããã³ã³ããŒã¶ãã«é¢æ°ãäœæããŠã¿ãŸãããïŒ
import { ref, onMounted, onUnmounted } from 'vue'
export function useMousePosition() {
const x = ref(0)
const y = ref(0)
const updatePosition = (event) => {
x.value = event.clientX
y.value = event.clientY
}
onMounted(() => {
window.addEventListener('mousemove', updatePosition)
})
onUnmounted(() => {
window.removeEventListener('mousemove', updatePosition)
})
return {
x,
y
}
}
ããã§ããã®ã³ã³ããŒã¶ãã«é¢æ°ãä»»æã®ã³ã³ããŒãã³ãã§äœ¿çšã§ããŸãïŒ
import { useMousePosition } from './useMousePosition'
export default {
setup() {
const { x, y } = useMousePosition()
return {
x,
y
}
}
}
å®è·µçãªäŸãšãŠãŒã¹ã±ãŒã¹
Composition APIãå®éã®ã·ããªãªã§ã©ã®ããã«äœ¿çšã§ããããããã€ãã®å®è·µçãªäŸãèŠãŠãããŸãããïŒ
1. ããŒã¿ãã§ãã
APIããããŒã¿ãååŸããããã®ã³ã³ããŒã¶ãã«é¢æ°ãäœæããã®ã¯äžè¬çãªãŠãŒã¹ã±ãŒã¹ã§ããããã«ãããåãããŒã¿ååŸããžãã¯ãè€æ°ã®ã³ã³ããŒãã³ãã§åå©çšã§ããŸãã
import { ref, onMounted } from 'vue'
export function useFetch(url) {
const data = ref(null)
const error = ref(null)
const loading = ref(true)
onMounted(async () => {
try {
const response = await fetch(url)
data.value = await response.json()
} catch (err) {
error.value = err
} finally {
loading.value = false
}
})
return {
data,
error,
loading
}
}
ãã®åŸããã®ã³ã³ããŒã¶ãã«é¢æ°ãã³ã³ããŒãã³ãã§æ¬¡ã®ããã«äœ¿çšã§ããŸãïŒ
import { useFetch } from './useFetch'
export default {
setup() {
const { data, error, loading } = useFetch('https://api.example.com/data')
return {
data,
error,
loading
}
}
}
2. ãã©ãŒã ããªããŒã·ã§ã³
ãã©ãŒã ããªããŒã·ã§ã³ã¯ãComposition APIãéåžžã«åœ¹ç«ã€ãã1ã€ã®åéã§ããããªããŒã·ã§ã³ããžãã¯ãã«ãã»ã«åããã³ã³ããŒã¶ãã«é¢æ°ãäœæããããŸããŸãªãã©ãŒã ã§åå©çšã§ããŸãã
import { ref } from 'vue'
export function useValidation() {
const errors = ref({})
const validateField = (fieldName, value, rules) => {
let error = null
for (const rule of rules) {
if (rule === 'required' && !value) {
error = 'This field is required'
break
} else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
error = 'Invalid email format'
break
}
}
if (error) {
errors.value[fieldName] = error
} else {
delete errors.value[fieldName]
}
}
return {
errors,
validateField
}
}
ã³ã³ããŒãã³ãã§ã®äœ¿ç𿹿³ïŒ
import { useValidation } from './useValidation'
import { ref } from 'vue'
export default {
setup() {
const { errors, validateField } = useValidation()
const email = ref('')
const validateEmail = () => {
validateField('email', email.value, ['required', 'email'])
}
return {
email,
errors,
validateEmail
}
}
}
3. ãŠãŒã¶ãŒèªèšŒã®ç®¡ç
èªèšŒããžãã¯ã¯ãã°ãã°è€éã§ãè€æ°ã®ã³ã³ããŒãã³ãã§éè€ããããšããããŸããComposition APIã䜿çšãããšããã¹ãŠã®èªèšŒããžãã¯ãã«ãã»ã«åããã³ã³ããŒãã³ãã䜿çšããããã®ã¯ãªãŒã³ãªAPIãæäŸããã³ã³ããŒã¶ãã«é¢æ°ãäœæã§ããŸãã
äŸïŒïŒç°¡æçïŒ
import { ref } from 'vue'
export function useAuth() {
const isLoggedIn = ref(false)
const user = ref(null)
const login = async (username, password) => {
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1000))
isLoggedIn.value = true
user.value = { username }
}
const logout = async () => {
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1000))
isLoggedIn.value = false
user.value = null
}
return {
isLoggedIn,
user,
login,
logout
}
}
Composition APIã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
Composition APIãæå€§éã«æŽ»çšããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãæ€èšããŠãã ããïŒ
- ã³ã³ããŒã¶ãã«é¢æ°ã¯çŠç¹ãçµãïŒ åã³ã³ããŒã¶ãã«é¢æ°ã¯ãåäžã®æç¢ºã«å®çŸ©ãããç®çãæã€ã¹ãã§ããããã«ãããçè§£ãåå©çšããã¹ãã容æã«ãªããŸãã
- 説æçãªååã䜿çšããïŒ ã³ã³ããŒã¶ãã«é¢æ°ã®ç®çãæç¢ºã«ç€ºãååãéžæããŸããããã«ãããã³ãŒããããèªã¿ããããä¿å®ãããããªããŸãã
- å¿ èŠãªãã®ã ããè¿ãïŒ ã³ã³ããŒãã³ãã§å®éã«å¿ èŠãªãªã¢ã¯ãã£ããªç¶æ ãšé¢æ°ã®ã¿ãè¿ããŸããããã«ãããã³ã³ããŒãã³ãã®è€éãã軜æžãããããã©ãŒãã³ã¹ãåäžããŸãã
- TypeScriptã®äœ¿çšãæ€èšããïŒ TypeScriptã¯åªããåå®å šæ§ãæäŸããéçºããã»ã¹ã®æ©ã段éã§ãšã©ãŒããã£ããããã®ã«åœ¹ç«ã¡ãŸããããã¯ãComposition APIãæ±ãå Žåã«ç¹ã«æçã§ãã
- ã³ã³ããŒã¶ãã«é¢æ°ãææžåããïŒ ã³ã³ããŒã¶ãã«é¢æ°ã«ã³ã¡ã³ãã远å ããŠããã®ç®çãåäœæ¹æ³ãããã³äŸåé¢ä¿ã説æããŸããããã«ãããä»ã®éçºè ïŒããã³å°æ¥ã®èªåïŒãã³ãŒããçè§£ãã䜿çšãããããªããŸãã
- ã³ã³ããŒã¶ãã«é¢æ°ããã¹ãããïŒ ã³ã³ããŒã¶ãã«é¢æ°ãæ£ããæ©èœããŠããããšã確èªããããã«åäœãã¹ããäœæããŸããããã«ããããã°ãæ©æã«çºèŠããã³ãŒãããŒã¹å šäœã®å質ãåäžãããããšãã§ããŸãã
- äžè²«ããã¹ã¿ã€ã«ã䜿çšããïŒ ã³ã³ããŒã¶ãã«é¢æ°ã«äžè²«ããã¹ã¿ã€ã«ã確ç«ãããããéµå®ããŸããããã«ãããã³ãŒããããèªã¿ããããä¿å®ãããããªããŸãã
äžè¬çãªèœãšã穎ãšãã®åé¿æ¹æ³
Composition APIã¯å€ãã®å©ç¹ãæäŸããŸãããæ³šæãã¹ãäžè¬çãªèœãšã穎ãããã€ããããŸãïŒ
- ã³ã³ããŒã¶ãã«é¢æ°ã®é床ãªè€éåïŒ å€¢äžã«ãªããããŠãè€éãããã³ã³ããŒã¶ãã«é¢æ°ãäœæããã¡ã§ããçŠç¹ãçµããã·ã³ãã«ã«ä¿ã€ããã«ããŠãã ãããã³ã³ããŒã¶ãã«é¢æ°ã倧ãããªããããå Žåã¯ãããå°ãã管çããããéšåã«åå²ããããšãæ€èšããŠãã ããã
- å¶çºçãªãªã¢ã¯ãã£ããã£ã®åé¡ïŒ
refãšreactiveãã©ã®ããã«æ©èœãããã確å®ã«çè§£ããæ£ãã䜿çšããŠãã ãããäŸãã°ãrefã®ãã¹ããããããããã£ãã¢ã³ã©ããããã«çŽæ¥å€æŽãããšãäºæããªãåäœã«ã€ãªããå¯èœæ§ããããŸãã - ã©ã€ããµã€ã¯ã«ããã¯ã®äžé©åãªäœ¿çšïŒ ã©ã€ããµã€ã¯ã«ããã¯ã®ã¿ã€ãã³ã°ã«æ³šæããé©åã«äœ¿çšããŠããããšã確èªããŠãã ãããäŸãã°ã
onBeforeMountã§ã¯DOMèŠçŽ ã¯ãŸã äœæãããŠããªããããã¢ã¯ã»ã¹ããããšããªãã§ãã ããã watchEffectã«ããããã©ãŒãã³ã¹ã®åé¡ïŒwatchEffectã«ãã£ãŠè¿œè·¡ãããäŸåé¢ä¿ã«æ³šæããŠãã ããã远跡ããäŸåé¢ä¿ãå€ããããšãããã©ãŒãã³ã¹ã®åé¡ã«ã€ãªããå¯èœæ§ããããŸãã代ããã«watchã䜿çšããŠãç£èŠãããäŸåé¢ä¿ãæç€ºçã«æå®ããããšãæ€èšããŠãã ããã- ã€ãã³ããªã¹ããŒã®ç»é²è§£é€ãå¿ããïŒ ã³ã³ããŒã¶ãã«é¢æ°å
ã§ã€ãã³ããªã¹ããŒã䜿çšããå Žåã¯ãã¡ã¢ãªãªãŒã¯ãé²ãããã«
onUnmountedããã¯ã§ããããç»é²è§£é€ããããã«ããŠãã ããã
Composition APIãšã°ããŒãã«ããŒã
Composition APIã¯ã以äžãä¿é²ããããšã«ãããã°ããŒãã«ãªéçºããŒã å ã§ã®ã³ã©ãã¬ãŒã·ã§ã³ãè²ã¿ãŸãïŒ
- æšæºåãããã³ãŒãæ§é ïŒ ã³ã³ããŒã¶ãã«é¢æ°ã«éç¹ã眮ãããšã§ãã³ãŒããæŽçããããã®æç¢ºã§äžè²«ãããã¿ãŒã³ãæäŸããã倿§ãªããã¯ã°ã©ãŠã³ããæã€ããŒã ã¡ã³ããŒãã³ãŒãããŒã¹ãçè§£ããè²¢ç®ãããããªããŸãã
- ã¢ãžã¥ã©ãŒãã¶ã€ã³ïŒ è€éãªããžãã¯ãåå©çšå¯èœãªã³ã³ããŒã¶ãã«ã«åå²ããããšã§ãããã¢ãžã¥ã©ãŒãªèšèšãå¯èœã«ãªããç°ãªãããŒã ã¡ã³ããŒãäºãã®äœæ¥ã«å¹²æžããããšãªããã¢ããªã±ãŒã·ã§ã³ã®ç¬ç«ããéšåã§äœæ¥ã§ããŸãã
- æ¹åãããã³ãŒãã¬ãã¥ãŒïŒ ã³ã³ããŒã¶ãã«é¢æ°ã®çŠç¹ãçµãããŠãããããã¬ãã¥ãŒæ åœè ã¯åã³ã³ããŒã¶ãã«ã®ç®çãšæ©èœãç°¡åã«çè§£ã§ããã³ãŒãã¬ãã¥ãŒãç°¡çŽ åãããŸãã
- ç¥èã®å ±æïŒ ã³ã³ããŒã¶ãã«é¢æ°ã¯èªå·±å®çµåã®ç¥èåäœãšããŠæ©èœããç°ãªããããžã§ã¯ããããŒã éã§ç°¡åã«å ±æããã³åå©çšã§ããŸãã
çµè«
Vue.js 3 Composition APIã¯ãVueã¢ããªã±ãŒã·ã§ã³ã®æ§æãåå©çšæ§ããã¹ãå¯èœæ§ãå€§å¹ ã«åäžãããããšãã§ãã匷åãªããŒã«ã§ãããã®åŸ¹åºè§£èª¬ã§æŠèª¬ãããã³ã¢ã³ã³ã»ãããçè§£ãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãComposition APIãæŽ»çšããŠãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«ããä¿å®æ§ãé«ãã¹ã±ãŒã©ãã«ãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸããComposition APIãåãå ¥ããŠãVue.js 3ã®ããã³ã·ã£ã«ãæå€§éã«åŒãåºããŸãããã
èªèº«ã®ãããžã§ã¯ãã§Composition APIã詊ããŠã¿ãŠããããæäŸããåºå€§ãªå¯èœæ§ãæ¢æ±ããããšããå§ãããŸããããããŒã³ãŒãã£ã³ã°ïŒ