มาดูวิธีการประกาศ reactive กับ ref กัน

declarative rendering เป็น core feature หนึ่ง ใน vue

ตัวอย่างการใช้ reactive

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

reactive() ใช้ได้เฉพาะ object เท่านั้น ในทางกลับกัน ref() ใช้ได้เฉพาะ value เท่านั้น และสามารถใช้ .value ดังตัวอย่าง

ตัวอย่างการใช้ ref

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'

ดูรายละเอียดเพิ่มเติมได้ที่ https://vuejs.org/guide/essentials/reactivity-fundamentals.html

ตัวอย่างแบบเต็ม

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

const counter = reactive({ count: 0 })
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

ทดลองเขียนได้ที่ https://vuejs.org/tutorial/#step-2