vue
<script setup>
// 引入需要的 API（Vue 3.3+ 可自动导入）
import { ref, computed, watch } from 'vue'

// 1. 响应式数据定义
const count = ref(0) // 基本类型响应式
const user = ref({ name: 'Vue', age: 3 }) // 引用类型响应式

// 2. 计算属性
const doubleCount = computed(() => count.value * 2)

// 3. 方法定义
const increment = () => {
  count.value++
  user.value.age++
}

// 4. 监听
watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`)
}, { immediate: true })

// 5. 业务逻辑聚合（示例：用户信息管理）
const useUserInfo = () => {
  const updateName = (newName) => {
    user.value.name = newName
  }
  return { updateName }
}

const { updateName } = useUserInfo()
</script>

<template>
  <div>
    <p>count: {{ count }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <p>user: {{ user }}</p>
    <button @click="increment">递增</button>
    <button @click="() => updateName('Vue 3')">更新名称</button>
  </div>
</template>

javascript
function reactive(target) {
  // 排除非对象类型
  if (typeof target !== 'object' || target === null) {
    return target
  }
  // 创建 Proxy 代理
  return new Proxy(target, {
    get(target, key, receiver) {
      // 收集依赖（简化版，实际 Vue 3 有更复杂的依赖追踪逻辑）
      track(target, key)
      // 递归代理子属性（懒代理）
      const result = Reflect.get(target, key, receiver)
      return reactive(result)
    },
    set(target, key, value, receiver) {
      // 触发更新
      const oldValue = Reflect.get(target, key, receiver)
      const success = Reflect.set(target, key, value, receiver)
      if (oldValue !== value) {
        trigger(target, key)
      }
      return success
    },
    deleteProperty(target, key) {
      // 支持删除属性监听
      const success = Reflect.deleteProperty(target, key)
      trigger(target, key)
      return success
    }
  })
}

// 使用示例
const obj = reactive({ name: 'Vue 3', list: [1, 2, 3] })
obj.age = 3 // 新增属性，可监听
delete obj.name // 删除属性，可监听
obj.list.push(4) // 数组变化，可监听
obj.list[0] = 0 // 数组索引变化，可监听

vue
<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
</script>

<template>
  <div>
    <button @click="isOpen = true">打开模态框</button>
    <!--  teleport to 属性指定要传送的目标节点 -->
    <Teleport to="body">
      <div v-if="isOpen">
        <div>
          <h3>这是一个瞬移的模态框</h3>
          <p>内容不受父组件 DOM 层级影响</p>
          <button @click="isOpen = false">关闭</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
.parent {
  position: relative;
  z-index: 1;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100; /* 无需担心父组件 z-index 限制 */
  background: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}
</style>

vue
<script setup>
// 引入异步组件
import { defineAsyncComponent, ref } from 'vue'
const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue') // 动态导入异步组件
)

// 模拟接口请求（setup 返回 Promise）
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'Vue 3 Suspense', desc: '异步加载神器' })
    }, 1500)
  })
}

const data = await fetchData() // async setup 语法
</script>

<template>
  <div>
    <h2>Suspense 异步加载示例</h2>
    <!-- Suspense 包含两个插槽：#default（异步内容）、#fallback（加载中内容） -->
    <Suspense>
      <template #default>
        <AsyncComponent :data="data" />
      </template>
      <template #fallback>
        <div>加载中...</div>
      </template>
    </Suspense>
  </div>
</template>