컴포넌트에 대한 깔끔한 형태로 해 준
<template>
<HelloWorld ref="hello"></HelloWorld>
<h1 @click="increase">
{{ count }} / {{ doubleCount }}
</h1>
<h1>
{{ message }} / {{ reversMessage }}
</h1>
</template>
<script>
import {ref, computed} from 'vue';
export default{
setup(){
const message = ref('Hello World!!!');
const reversMessage = computed( ()=>{
return message.value.split('').reverse().join('');
});
const count = ref(0);
const doubleCount = computed(()=>{
return count.value * 2;
});
function increase(){
count.value += 1;
}
return{
message,
reversMessage,
count,
doubleCount,
increase
}
},
}
</script>
setup 저거 가져올려면 ref 가져와야 함.
저렇게 뭔가 js로 쫙 해놓은 다음에
return안에다 객체형식으로 해서 다 컴포넌트에 사용할 수 있게 넘길 수 있음.
저 예시는 너무 많고,
<template>
<h1 @click="increase">
{{ count }}
</h1>
<h1 @click="changeMessage">
{{ message }}
</h1>
</template>
<script>
import {ref} from 'vue'
export default{
setup(){
const count = ref(0);
function increase(){
count.value +=1;
}
const message = ref("Hello Vue3!!!");
function changeMessage(){
message.value = "good";
}
return {
count,
increase,
message,
changeMessage
}
}
}
</script>
컴포지션 API는 쉽게 말해서 보통 js처럼 변수나, 함수 만들고,
return을 통해서 그걸 원래 vue의 data()나 methods: 처럼 사용할 수 있게 됨.
참고로, 저 컴포지션 api 해서 만든 변수들은 반응형이 아님.
그래서 반응형으로 만들려면 ref()로 감싸줘야 하고,
그 변수의 값을 이용하려면 변수.value 해서 사용하면 됨.
컴포지션에서 변수는 const로 선언하고 ref로 감싸고 접근할 때는 .value 해서 접근해야 함.
ref는 vue로부터 import 해 와야 함.
import 해올 때, 꼭 객체형식으로 씌우면서 가져와야 함.
뭔가 복잡한 계산식이 필요한 메소드같은 거 필요하면 이걸로도 할만 함.
그리고 저런 식으로 관련있는 것들끼리 가까이 두는 듯.
count와 increase처럼
참고로,
computed:{
doubleCount(){
return this.count * 2;
},
reverseMessage(){
return this.message.split('').reverse().join('');
}
}
이렇게 computed로 되어 있는 걸 만들고 싶다면,
const doubleCount = computed(()=>{
return count.value * 2;
})
이런 식으로 콜백함수로 만들어야 한다.
저 computed 메소드는
import {computed, ref} from 'vue'
ref 처럼 view에서 가져와야 한다.
컴포지션 API에서 watch를 쓰고 싶다면,
watch:{
message(newMessage){
console.log(newMessage);
}
}
이런 걸 하고 싶다면,
import {computed, ref, watch} from 'vue'
마찬가지로 view에서 watch를 가져오고,
watch(message, newMessage=>{
console.log(newMessage);
});
이렇게 하면 된다.
watch(감지할데이터, (변경된데이터)=>{})
이렇게 콜백 넣으면 자동으로 들어가 진다.
create(), mounted() 등 생명주기와 관련된 것을 컴포지션 API에서 쓰고 싶다고 한다면,
먼저 mounted()는,
onMounted(()=>{
console.log("mounted");
});
onMounted(콜백())
하면된다.
그럼 created()는?
따로 없다.
그냥 저 setup(), 즉 컴포지션 안 자체가 created 영역이라고 보면 된다.
그럼 props나 부모컴포넌트가 준 속성을 이용하고 싶다면..?
이거는 setup()안, 즉 컴포지션 API 안에다 만들 수 없다.
밖으로부터 받아오는 거기 때문에..
setup(props, context){
onMounted(()=>{
console.log(props.color);
console.log(context.attrs);
});
}
이렇게 인자로 받아야 한다.
export default{
props:{
color:{
type:String,
default:'gray'
}
},
setup(props, context){
onMounted(()=>{
console.log(props.color);
console.log(context.attrs);
});
}
}
context는 부모 컴포넌트가 지정해준 속성들이 있는 곳 같다.
저기에 emit도 있고, 여러 기타 속성들, 뭐 style도 있을 수 있겠고.