响应式系统

Vue 的响应式系统让数据变化自动更新到界面，像魔法一样！🪄

ref 🎯

创建响应式数据：

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    点击了 {{ count }} 次 🎉
  </button>
</template>

reactive 📦

创建响应式对象：

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

const state = reactive({
  count: 0,
  message: 'Hello Vue! 💚'
})

function increment() {
  state.count++
}
</script>

计算属性 🧮

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

const count = ref(0)
const double = computed(() => count.value * 2)
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }} ✨</p>
  </div>
</template>

ref

用于基本类型的响应式数据

reactive

用于对象的响应式数据

computed

基于其他数据计算得出

watch

监听数据变化执行副作用

🌸响应式系统是 Vue 的核心魔法！💫