[Vue3] Vue3 Basic with composition api

반복문 

• key를 고유값으로 해주는게 좋다. 그래야 VueRK 리랜더링할 구역을 쉽게 찾아. 최적화됨
• 값 동적 바인딩을 위해 :key 로 사용
• ({값}, index) 형태로 사용 가능
• key에 index 넣는건 디폴트이기때문에 딱히 의미없음. 다른 고유값넣기
• Array, Object 지원.
• 데이터 반응형으로 Array에 값이 추가되거나 삭제시에도 반영됨

<li v-for="({name, id}, index) in items" :key=id">{{ index, name }}</li>

 

Form

• v-model modifier 은 커스텀이 가능하다.
  참고 : https://vuejs.org/guide/components/v-model

• 같은 데이터에 여러 input이 바인딩되면, 각각 업데이트되는대로 데이터가 변경된다.

<input type="radio" v-model="data" value="A">
<input type="radio" v-model="data" value="B">

{{ data }}   // clickA : A / clickB : B

• model 여러개와 modifier 쓰기
  => 아래와 같이 쓰임이가능하지만.. 가독성이 좋은지는 의문 (의견 들어보기)
  

[출처] https://vuejs.org/guide/components/v-model

<UserName
  v-model:first-name.capitalize="first"
  v-model:last-name.uppercase="last"
/>

<script setup>
const [firstName, firstNameModifiers] = defineModel('firstName')
const [lastName, lastNameModifiers] = defineModel('lastName')

console.log(firstNameModifiers) // { capitalize: true }
console.log(lastNameModifiers) // { uppercase: true }
</script>


//사용처
<script setup>
const props = defineProps({
firstName: String,
lastName: String,
firstNameModifiers: { default: () => ({}) },
lastNameModifiers: { default: () => ({}) }
})
defineEmits(['update:firstName', 'update:lastName'])

console.log(props.firstNameModifiers) // { capitalize: true }
console.log(props.lastNameModifiers) // { uppercase: true }
</script>

• Form 제출시 submit 이벤트를 사용할 수 있는데, submit 이벤트 발생시 새로고침 되므로, 이를 막아줘야한다.

[출처] https://v2.ko.vuejs.org/v2/guide/events.html

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

• 값이 없을때 버튼 비활성화

<button v-bind:disabled="item.length === 0" >

 

reactive

• ref 와 대부분 동일하지만, 원시타입이 아닌 값에만 사용 가능
• script내에서 접근시 .value로 가져오지않아도됨
• 통으로 바꾸고싶을 때는 ref를 사용한다. => Array, Object 라면 굳이 ref 안써도? => 단, 취향차이. 성능차이 있는지는 의문

// 아래와 같이 사용 불가
let data = reactive({item:1})
const changeData = () => {
  data = { item: data.item++}
}