Computed값수정/스타일동적바인딩/v-for구조분해할당/watch의여러변수감시

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
fullName.value = 'John Doe' // computed의 값을 수정함 (setter호출)

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 참고: 분해 할당 문법을 사용함.
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

const fontColor = 'color:red'
const size = 15
...
<div :style="[fontColor,{fontSize:size+'px'}]">테스트</div>

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

*** 일반적인 v-for 사용 예제
<li v-for="item in items">
  {{ item.message }}
</li>

*** 구조 분해할당1
<li v-for="{ message } in items">
  {{ message }}
</li>

*** 구조분해할당 2
<!-- index 별칭도 사용하는 경우 -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

const x = ref(0)
const y = ref(0)

// 단일 변수 감시
watch(x, (newX) => {
  console.log(`x값: ${newX}`)
})

// 여러 변수감시(계산된 결과값 감시)
// getter함수를 첫번째 인자로 전달해서 x.value + y.value한 결과를 감시
watch(
  () => x.value + y.value,   // 첫번째인자 (getter함수)
  (sum) => {                 // 두번째인자 (setter함수)
    console.log(`x + y: ${sum}`)
  }
)

// 여러 변수감시(배열을 이용한 감시)
// 배열을 첫번째 인자로 전달해서 x와 y의 결과값을 감시
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x는 ${newX}이고, y는 ${newY} 입니다.`)
})

<자식컴포넌트 @click="이벤트1" style="color:red" class="test-class1">

<button @click="이벤트2" style="width:100px" class="test-class2" /> 

<button @click="이벤트1,이벤트2" style="color:red; width:100px; " class="test-class1 test-class2" />