Vue.jsVue.js

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <input v-model="message" placeholder="메시지 입력">
    <p>입력값: {{ message }}</p>
    <button @click="greet">인사하기</button>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const title = ref('Hello Vue!')
const message = ref('')
const items = ref([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
])

function greet() {
  alert(`Hello, ${message.value}!`)
}
</script>

<style scoped>
h1 { color: #41b883; }
</style>

import { ref, computed, watch } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

watch(count, (newVal, oldVal) => {
    console.log(`${oldVal} → ${newVal}`)
})

count.value++  // 모든 의존성 자동 업데이트