Composition API 식으로 데이터만드는 법 - WastepaperBasket/Vue.js GitHub Wiki
- 반면 관련된 기능끼리 하나로 모으고 싶으면 Composition API를 사용
- var 데이터이름 = ref(데이터) 안에 항상 데이터를 저장해줘야함
(MyPage.vue script태그안에 들어갈 내용)
import { ref } from 'vue'
export default {
name : 'mypage',
setup(){
let follower = ref([]);
return { follower }
},
}
- 업데이트
<script setup>
import { ref } from 'vue'
let follower = ref([1,2,3])
</script>
<template>
<div>{{ follower }}</div>
</template>
import { ref } from 'vue'
import axios from 'axios'
export default {
name : 'mypage',
setup(){
let follower = ref([]);
axios.get('/follower.json').then((a)=>{
follower.value = a.data
})
return { follower }
},
}
-컴포넌트가 부착될 때, 업데이트될 때 뭔가 실행하고 싶으면?
import { ref, onMounted } from 'vue'
import axios from 'axios'
export default {
name : 'mypage',
setup(){
let follower = ref([]);
onMounted(()=>{
axios.get('/follower.json').then((a)=>{
follower.value = a.data
})
})
return { follower }
},
}
-
reactive는 object, array 같은 reference data type을 주로 담고
-
ref는 숫자, 문자같은 primitive data type을 담게 되어있습니다.
import { ref, reactive } from 'vue'
export default {
setup(){
let follower = ref([]);
let test = reactive({name : 'kim'})
return { follower }
},
}
import { ref, toRefs } from 'vue'
export default {
setup(props){
let follower = ref([]);
let { 프롭스명 } = toRefs(props)
console.log(프롭스명.value)
return { follower }
},
}
- 데이터변화를 감시
import { ref, watch } from 'vue'
export default {
setup(props){
let follower = ref([]);
watch( 데이터명, ()=>{ 데이터 변화시 실행할 코드 } )
return { follower }
},
}
import { ref, computed } from 'vue'
export default {
setup(props){
let follower = ref([]);
let 어쩌구 = computed( ()=>{ return 10 } )
console.log(어쩌구.value)
return { follower }
},
}
import { ref } from 'vue'
export default {
setup(props){
let follower = ref([]);
function hello(){
}
return { follower, hello }
},
}
import { ref } from 'vue'
import { useStore } from 'vuex'
export default {
setup(props){
let follower = ref([]);
let store = useStore();
console.log(store.state.name)
return { follower }
},
}