Vue 详解：渐进式框架的核心概念与响应式系统

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

// ref：基本类型的响应式包装
const count = ref(0)
console.log(count.value)  // 必须使用 .value 访问

// reactive：对象的深度响应式
const user = reactive({ name: 'Alice', age: 25 })
console.log(user.name)    // 直接访问，无需 .value

// computed：计算属性（自动缓存）
const doubleCount = computed(() => count.value * 2)
// doubleCount.value 自动追踪 count 的依赖

// watch：侦听器
watch(count, (newVal, oldVal) => {
  console.log(`count changed: ${oldVal} → ${newVal}`)
})

function increment() {
  count.value++          // 修改触发更新
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
  <p>Double: {{ doubleCount }}</p>
</template>

// ❌ 失去响应性
const state = reactive({ count: 0, name: 'Alice' })
const { count } = state  // 解构后 count 不再触发更新

// ✅ 使用 toRefs 保持响应性
import { toRefs } from 'vue'
const { count, name } = toRefs(state)
// count.value 仍然是响应式的

const state = reactive({
  user: {
    profile: {
      name: 'Alice'
    }
  }
})

// 自动追踪深层嵌套
state.user.profile.name = 'Bob'  // 自动触发依赖更新

import { shallowRef } from 'vue'

// 大型对象不需要深度响应时
const bigData = shallowRef({
  list: [/* 10000 items */]
})
// 只有 bigData.value = newObj 会触发更新
// bigData.value.list[0] = 'x' 不会自动触发

<template>
  <!-- 文本插值 -->
  <p>{{ message }}</p>

  <!-- 一次性插值（不追踪变化） -->
  <p v-once>{{ staticMessage }}</p>

  <!-- 原始 HTML（XSS 风险，谨慎使用） -->
  <div v-html="rawHtml"></div>

  <!-- 属性绑定 -->
  <img :src="imageUrl" :alt="description">
  <button :disabled="isLoading">Submit</button>

  <!-- 类名绑定：对象语法 -->
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>

  <!-- 类名绑定：数组语法 -->
  <div :class="[baseClass, isActive ? 'active' : '']"></div>

  <!-- 条件渲染 -->
  <div v-if="isAdmin">Admin Panel</div>
  <div v-else-if="isModerator">Moderator Panel</div>
  <div v-else>User Panel</div>

  <!-- 列表渲染 -->
  <ul>
    <li v-for="(item, index) in list" :key="item.id">
      {{ index + 1 }}. {{ item.name }}
    </li>
  </ul>

  <!-- 事件处理 -->
  <button @click="handleClick">Click</button>
  <input @input="e => search(e.target.value)">
  <form @submit.prevent="onSubmit"></form>

  <!-- 双向绑定 -->
  <input v-model="searchText">
  <!-- 等价于：<input :value="searchText" @input="searchText = $event.target.value"> -->
</template>

<script setup>
const text = ref('')
const agree = ref(false)
const selected = ref('')
const checked = ref([])
</script>

<template>
  <!-- 文本 -->
  <input v-model="text">

  <!-- 复选框 -->
  <input type="checkbox" v-model="agree"> Agree

  <!-- 单选组 -->
  <select v-model="selected">
    <option value="a">A</option>
    <option value="b">B</option>
  </select>

  <!-- 多选组 -->
  <input type="checkbox" v-model="checked" value="apple"> Apple
  <input type="checkbox" v-model="checked" value="banana"> Banana

  <!-- 自定义组件 v-model -->
  <CustomInput v-model="text" />
  <!-- 自定义组件内部：defineModel() 或 props + emit('update:modelValue') -->
</template>

// ❌ Options API：一个功能的代码分散在 data/computed/methods 中
export default {
  data() { return { query: '', results: [], loading: false } },
  computed: { filtered() { /* ... */ } },
  methods: {
    search() { /* ... */ },
    debounceSearch() { /* ... */ },
  },
  watch: { query() { /* ... */ } },
  created() { /* ... */ },
}

// ✅ Composition API：一个功能的代码聚合在一起
<script setup>
import { ref, watch, onMounted } from 'vue'

// ========== Search Feature =============
function useSearch() {
  const query = ref('')
  const results = ref([])
  const loading = ref(false)

  async function search() {
    loading.value = true
    results.value = await fetchApi(query.value)
    loading.value = false
  }

  watch(query, debounce(search, 300))
  onMounted(search)

  return { query, results, loading }
}

// ========== Auth Feature =============
function useAuth() { /* ... */ }

// ========== Component =============
const { query, results, loading } = useSearch()
const { user, login, logout } = useAuth()
</script>

// composables/useMouse.ts
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

// 使用
<script setup>
import { useMouse } from './composables/useMouse'
const { x, y } = useMouse()
</script>

<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('Component mounted')
})

onUnmounted(() => {
  console.log('Component unmounted')
})
</script>

<template>
  <div class="page">
    <!-- Modal 被渲染到 body 下，而非 .page 内 -->
    <Teleport to="body">
      <div class="modal" v-if="showModal">
        <h2>Modal Title</h2>
        <p>Modal content...</p>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { defineAsyncComponent, Suspense } from 'vue'

const AsyncChart = defineAsyncComponent(() => import('./Chart.vue'))
</script>

<template>
  <Suspense>
    <template #default>
      <AsyncChart />
    </template>
    <template #fallback>
      <LoadingSkeleton />
    </template>
  </Suspense>
</template>