const data = {
  user: {
    profile: {
      name: "张三",
      age: 30,
      address: {
        city: "北京",
        district: "朝阳区",
        street: {
          name: "建国路",
          number: 123
        }
      }
    },
    settings: {
      theme: "dark",
      notifications: true
    }
  }
}

<div>
  <h1>网站标题</h1>  <!-- 静态 -->
  <nav>
    <a href="/">首页</a>  <!-- 静态 -->
    <a href="/about">关于</a>  <!-- 静态 -->
  </nav>
  <main>{{ dynamicContent }}</main>  <!-- 动态 -->
</div>

<div :class="dynamicClass">{{ dynamicText }}</div>

<div>
  <header>标题</header>
  <main>
    <article>内容</article>
  </main>
</div>

// 三层嵌套
const vnode = {
  type: 'div',
  children: [
    { type: 'header', children: ['标题'] },
    { 
      type: 'main', 
      children: [
        { type: 'article', children: ['内容'] }
      ]
    }
  ]
}

// 压平为数组，跳过不必要的main节点
const vnode = {
  type: 'div',
  children: [
    { type: 'header', children: ['标题'] },
    { type: 'article', children: ['内容'] }  // 直接作为div的子节点
  ]
}

// 用户相关的所有逻辑集中在一个函数中
function useUser(userId) {
  const user = ref(null)
  const loading = ref(false)
  
  const fetchUser = async () => {
    loading.value = true
    user.value = await api.getUser(userId.value)
    loading.value = false
  }
  
  const fullName = computed(() => {
    if (!user.value) return ''
    return `${user.value.firstName} ${user.value.lastName}`
  })
  
  // 自动响应 userId 变化
  watch(userId, fetchUser, { immediate: true })
  
  return {
    user,
    loading,
    fullName,
    fetchUser
  }
}

// 在组件中组合使用
export default {
  setup() {
    const userId = ref(1)
    const { user, loading, fullName } = useUser(userId)
    
    // 可以轻松组合其他逻辑
    const { posts } = useUserPosts(userId)
    
    return { user, loading, fullName, posts }
  }
}

const authGuard = (to, from) => {
  if (!isAuthenticated() && to.meta.requiresAuth) {
    return { name: 'login' }
  }
}

router.beforeEach(authGuard)

const UserProfile = () => import(
  /* webpackChunkName: "user-profile" */
  /* webpackPrefetch: true */
  './views/UserProfile.vue'
)

// 扩展 RouteMeta 类型
declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
    layout?: 'default' | 'admin'
    title?: string
  }
}

// 使用时有完整的类型提示
router.beforeEach((to) => {
  if (to.meta.requiresAuth) {  // 自动类型推导
    // 权限检查逻辑
  }
})

import { useRoute, useRouter } from 'vue-router'
import { computed, watch } from 'vue'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    // 响应式路由参数
    const userId = computed(() => 
      parseInt(route.params.id as string)
    )
    
    // 监听路由变化
    watch(
      () => route.params.id,
      (newId) => {
        console.log('用户ID变化:', newId)
      }
    )
    
    // 编程式导航
    const goToProfile = () => {
      router.push({
        name: 'user-profile',
        params: { id: userId.value }
      })
    }
    
    return { userId, goToProfile }
  }
}

class PermissionRouter {
  private router: Router
  private isRoutesAdded = false
  
  constructor(router: Router) {
    this.router = router
    this.setupPermissionGuard()
  }
  
  // 设置权限守卫
  private setupPermissionGuard() {
    this.router.beforeEach(async (to) => {
      // 不需要权限的路由直接放行
      if (!to.meta?.requiresAuth) {
        return true
      }
      
      // 检查登录状态
      if (!isAuthenticated()) {
        return { name: 'login' }
      }
      
      // 检查权限
      const userRoles = getUserRoles()
      if (to.meta.roles && !to.meta.roles.some(role => userRoles.includes(role))) {
        return { name: 'forbidden' }
      }
      
      // 动态路由处理
      if (!this.isRoutesAdded) {
        await this.addDynamicRoutes(userRoles)
        return to.fullPath  // 重试当前导航
      }
      
      return true
    })
  }
  
  // 添加动态路由
  private async addDynamicRoutes(roles: string[]) {
    const dynamicRoutes = await this.fetchRoutesByRoles(roles)
    
    dynamicRoutes.forEach(route => {
      this.router.addRoute(route)
    })
    
    this.isRoutesAdded = true
  }
  
  // 从服务器获取路由配置
  private async fetchRoutesByRoles(roles: string[]): Promise<RouteRecordRaw[]> {
    const response = await api.getRoutes({ roles })
    return response.data
  }
}

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: () => ({
    count: 0
  }),
  
  getters: {
    doubleCount: (state) => state.count * 2
  },
  
  mutations: {
    increment(state) {
      state.count++
    }
  },
  
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

// 组件中使用
import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
  setup() {
    const store = useStore()
    
    return {
      count: computed(() => store.state.count),
      doubleCount: computed(() => store.getters.doubleCount),
      increment: () => store.commit('increment'),
      incrementAsync: () => store.dispatch('incrementAsync')
    }
  }
}

// counter.store.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  
  getters: {
    doubleCount: (state) => state.count * 2
  },
  
  actions: {
    increment() {
      this.count++
    },
    
    incrementAsync() {
      setTimeout(() => {
        this.increment()
      }, 1000)
    }
  }
})

// 组件中使用
import { useCounterStore } from './stores/counter'

export default {
  setup() {
    const counter = useCounterStore()
    
    return {
      count: computed(() => counter.count),
      doubleCount: computed(() => counter.doubleCount),
      increment: () => counter.increment(),
      incrementAsync: () => counter.incrementAsync()
    }
  }
}

// 不使用 $patch - 触发两次更新
store.count++
store.user.name = '新名字'

// 使用 $patch - 只触发一次更新
store.$patch({
  count: store.count + 1,
  user: { ...store.user, name: '新名字' }
})

interface PiniaPluginContext {
  pinia: Pinia           // pinia 实例
  app: App              // Vue 应用实例
  store: Store          // 当前 store 实例
  options: DefineStoreOptions // store 的选项
}

type PiniaPlugin = (context: PiniaPluginContext) => void

const persistPlugin: PiniaPlugin = ({ store, options }) => {
  // 从选项中获取持久化配置
  const persist = options.persist
  
  if (!persist) return
  
  // 确定存储方式和键名
  const storage = persist.storage || localStorage
  const key = persist.key || store.$id
  
  // 初始加载：从存储中恢复状态
  try {
    const storedState = storage.getItem(key)
    if (storedState) {
      store.$patch(JSON.parse(storedState))
    }
  } catch (error) {
    console.error('加载持久化状态失败:', error)
  }
  
  // 订阅状态变化：保存到存储
  store.$subscribe((mutation, state) => {
    try {
      const serializedState = JSON.stringify(state)
      storage.setItem(key, serializedState)
    } catch (error) {
      console.error('保存持久化状态失败:', error)
    }
  }, { detached: true })  // detached: true 确保订阅在组件卸载后仍有效
}

// base-store.ts - 基础Store工厂
export function createBaseStore(id: string) {
  return defineStore(id, () => {
    // 共享状态：加载状态和错误信息
    const loading = ref(false)
    const error = ref<string | null>(null)
    
    // 共享方法：状态管理
    const setLoading = (value: boolean) => {
      loading.value = value
    }
    
    const setError = (message: string | null) => {
      error.value = message
    }
    
    const clearError = () => {
      error.value = null
    }
    
    // 共享方法：异步操作包装器
    async function withLoading<T>(fn: () => Promise<T>): Promise<T> {
      try {
        setLoading(true)
        clearError()
        return await fn()
      } catch (err) {
        setError(err.message)
        throw err
      } finally {
        setLoading(false)
      }
    }
    
    return {
      // 只读状态，防止外部直接修改
      loading: readonly(loading),
      error: readonly(error),
      
      // 操作方法
      setLoading,
      setError,
      clearError,
      withLoading
    }
  })
}

// user-store.ts - 用户Store
export const useUserStore = defineStore('user', () => {
  // 继承基础功能
  const baseStore = createBaseStore('user')()
  
  // 特定状态
  const users = ref<User[]>([])
  const currentUser = ref<User | null>(null)
  
  // 特定actions
  const fetchUsers = async () => {
    return baseStore.withLoading(async () => {
      const response = await api.getUsers()
      users.value = response.data
      return users.value
    })
  }
  
  const login = async (credentials: LoginCredentials) => {
    return baseStore.withLoading(async () => {
      const user = await api.login(credentials)
      currentUser.value = user
      return user
    })
  }
  
  // 返回组合后的store
  return {
    // 基础功能
    ...baseStore,
    
    // 特定状态（只读）
    users: readonly(users),
    currentUser: readonly(currentUser),
    
    // 特定方法
    fetchUsers,
    login
  }
})

// 服务端创建
export function createSSRPinia() {
  const pinia = createPinia()
  
  return {
    pinia,
    // 获取序列化状态
    getState: () => JSON.stringify(pinia.state.value),
    // 客户端激活
    hydrate: (initialState: string) => {
      const parsedState = JSON.parse(initialState)
      pinia.state.value = parsedState
    }
  }
}

// 服务端使用
import { createSSRApp } from 'vue'
import { createSSRPinia } from './pinia-ssr'

export async function render(url: string) {
  const { pinia, getState } = createSSRPinia()
  const app = createSSRApp(App)
  
  app.use(pinia)
  
  // 渲染应用
  const html = await renderToString(app)
  
  // 获取状态
  const initialState = getState()
  
  return {
    html,
    initialState
  }
}

// 客户端使用
const { pinia, hydrate } = createSSRPinia()

// 从window或其他地方获取服务端状态
const initialState = window.__INITIAL_STATE__
if (initialState) {
  hydrate(initialState)
}

const app = createApp(App)
app.use(pinia)
app.mount('#app')

// nuxt.config.js
export default {
  modules: ['@pinia/nuxt'],
  
  pinia: {
    autoImports: [
      'defineStore',
      ['defineStore', 'definePiniaStore']
    ]
  }
}

// store中使用
export const useProductStore = defineStore('products', {
  state: () => ({
    products: [],
    categories: []
  }),
  
  actions: {
    // SSR友好的数据获取
    async fetchProducts() {
      if (this.products.length > 0) {
        return
      }
      
      const { data } = await useFetch('/api/products')
      this.products = data.value
    }
  },
  
  // 服务端预取
  serverPrefetch() {
    return this.fetchProducts()
  }
})

export const useHeavyStore = defineStore('heavy', () => {
  // 大型列表使用shallowRef，只做浅层响应式
  const largeList = shallowRef<HeavyItem[]>([])
  
  // 静态配置使用markRaw，避免不必要的响应式开销
  const config = markRaw({
    apiUrl: 'https://api.example.com',
    timeout: 5000,
    retries: 3
  })
  
  return { largeList, config }
})

export const useOptimizedStore = defineStore('optimized', () => {
  const items = ref<Item[]>([])
  
  // 批量添加项目
  const addItemsBatch = (newItems: Item[]) => {
    // 使用$patch进行批量更新
    const store = useOptimizedStore()
    
    store.$patch((state) => {
      state.items.push(...newItems)
    })
  }
  
  return { items, addItemsBatch }
})

import { debounce } from 'lodash-es'
import { ref, watch, onUnmounted } from 'vue'

export function useDebouncedSearch() {
  const searchQuery = ref('')
  const searchResults = ref([])
  
  // 防抖搜索，避免频繁请求
  const debouncedSearch = debounce(async (query: string) => {
    if (!query.trim()) return
    
    const results = await api.search(query)
    searchResults.value = results
  }, 300)
  
  // 监听搜索词变化
  watch(searchQuery, debouncedSearch)
  
  // 组件卸载时取消防抖
  onUnmounted(() => {
    debouncedSearch.cancel()
  })
  
  return { searchQuery, searchResults }
}

export const useTemporaryStore = defineStore('temporary', () => {
  const data = ref<any>(null)
  let cleanupSubscription: () => void
  
  const fetchData = async () => {
    data.value = await api.getData()
    
    // 设置自动清理
    cleanupSubscription = store.$subscribe(() => {
      // 清理逻辑
    })
  }
  
  const cleanup = () => {
    data.value = null
    if (cleanupSubscription) {
      cleanupSubscription()
    }
  }
  
  return { data, fetchData, cleanup }
})

import { createStore } from 'vuex'

// 类型定义更加完善
interface State {
  count: number
  user: User | null
}

const store = createStore<State>({
  state: () => ({
    count: 0,
    user: null
  }),
  
  mutations: {
    increment(state) {
      // state有完整的类型提示
      state.count++
    }
  }
})

import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
  setup() {
    const store = useStore()
    
    // 响应式访问状态
    const count = computed(() => store.state.count)
    
    // 使用mutation
    const increment = () => store.commit('increment')
    
    // 使用action
    const fetchData = () => store.dispatch('fetchData')
    
    return { count, increment, fetchData }
  }
}

function resetStoreVM(store, state) {
  // 使用Vue 3的reactive创建响应式状态
  store._vm = reactive({
    $$state: state
  })
}

// 严格模式实现
if (store.strict) {
  // 使用watch监听状态变化
  watch(() => store._vm.$$state, () => {
    // 检查是否在mutation中
    if (!store._committing) {
      throw new Error('不能在 mutation 之外修改状态')
    }
  }, { deep: true, flush: 'sync' })
}

// 同时使用Vuex和Pinia
import { createStore } from 'vuex'
import { createPinia } from 'pinia'

const vuexStore = createStore({ /* 现有配置 */ })
const pinia = createPinia()

const app = createApp(App)
app.use(vuexStore)
app.use(pinia)

// Vuex模块
const userModule = {
  namespaced: true,
  state: () => ({ users: [] }),
  mutations: { setUsers(state, users) { state.users = users } },
  actions: { fetchUsers({ commit }) { /* ... */ } }
}

// 迁移到Pinia
export const useUserStore = defineStore('user', {
  state: () => ({ users: [] }),
  actions: {
    setUsers(users) { this.users = users },
    async fetchUsers() {
      const users = await api.getUsers()
      this.setUsers(users)
    }
  }
})

// Vuex到Pinia转换助手
function convertVuexModuleToPinia(vuexModule, id) {
  const options = {
    id,
    state: () => ({ ...vuexModule.state() }),
    getters: {},
    actions: {}
  }
  
  // 转换getters
  if (vuexModule.getters) {
    Object.keys(vuexModule.getters).forEach(key => {
      options.getters[key] = function() {
        return vuexModule.getters[key](
          this.state,
          this.getters,
          this.rootState,
          this.rootGetters
        )
      }
    })
  }
  
  // 转换mutations为actions
  if (vuexModule.mutations) {
    Object.keys(vuexModule.mutations).forEach(key => {
      options.actions[key] = function(payload) {
        vuexModule.mutations[key](this.state, payload)
      }
    })
  }
  
  // 转换actions
  if (vuexModule.actions) {
    Object.keys(vuexModule.actions).forEach(key => {
      options.actions[key] = async function(payload) {
        const context = {
          state: this.state,
          getters: this.getters,
          commit: this.commit,
          dispatch: this.dispatch,
          rootState: this.rootState,
          rootGetters: this.rootGetters
        }
        return await vuexModule.actions[key](context, payload)
      }
    })
  }
  
  return defineStore(id, options)
}

function syncStates(vuexStore, piniaStore, mapping) {
  // Vuex -> Pinia
  vuexStore.subscribe((mutation, state) => {
    if (mapping[mutation.type]) {
      piniaStore[mapping[mutation.type]](mutation.payload)
    }
  })
  
  // Pinia -> Vuex
  piniaStore.$subscribe((mutation, state) => {
    // 同步状态回Vuex
  })
}

// main.ts - 应用入口
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

// 1. 创建应用实例
const app = createApp(App)

// 2. 创建Pinia实例（带插件）
const pinia = createPinia()
pinia.use(persistPlugin)    // 持久化插件
pinia.use(loggerPlugin)     // 日志插件

// 3. 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [...],  // 路由配置
  scrollBehavior(to, from, savedPosition) {
    // 滚动行为控制
    return savedPosition || { top: 0 }
  }
})

// 4. 安装插件
app.use(pinia)
app.use(router)

// 5. 全局组件注册（可选）
import BaseButton from './components/BaseButton.vue'
app.component('BaseButton', BaseButton)

// 6. 全局指令注册（可选）
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

// 7. 全局配置
app.config.globalProperties.$filters = {
  formatDate: (date: Date) => {
    return new Intl.DateTimeFormat('zh-CN').format(date)
  },
  formatCurrency: (amount: number) => {
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: 'CNY'
    }).format(amount)
  }
}

// 8. 全局错误处理
app.config.errorHandler = (err, instance, info) => {
  console.error('Vue错误:', err)
  // 上报错误到监控服务
  errorTracker.captureException(err, {
    component: instance?.$options.name,
    info
  })
}

// 9. 全局警告处理
app.config.warnHandler = (msg, instance, trace) => {
  console.warn('Vue警告:', msg, trace)
}

// 10. 性能监控（开发环境）
if (process.env.NODE_ENV === 'development') {
  app.config.performance = true
}

// 11. 挂载应用
app.mount('#app')

src/
├── api/                    # API层 - 所有数据请求逻辑
│   ├── clients/           # API客户端配置
│   │   ├── http-client.ts # HTTP客户端
│   │   └── websocket-client.ts # WebSocket客户端
│   ├── endpoints/         # API端点定义
│   │   ├── auth.api.ts    # 认证相关API
│   │   ├── user.api.ts    # 用户相关API
│   │   └── product.api.ts # 产品相关API
│   ├── types/             # API响应类型定义
│   └── interceptors/      # 请求/响应拦截器
│
├── assets/                # 静态资源
│   ├── styles/           # 全局样式
│   ├── images/           # 图片资源
│   └── fonts/            # 字体文件
│
├── components/            # 组件目录
│   ├── base/             # 基础组件（无业务逻辑）
│   │   ├── BaseButton.vue
│   │   ├── BaseInput.vue
│   │   └── BaseModal.vue
│   ├── business/         # 业务组件
│   │   ├── UserCard.vue
│   │   ├── ProductList.vue
│   │   └── OrderForm.vue
│   ├── layouts/          # 布局组件
│   │   ├── DefaultLayout.vue
│   │   ├── AuthLayout.vue
│   │   └── AdminLayout.vue
│   └── shared/           # 共享组件
│
├── composables/           # 组合式函数
│   ├── useAuth.ts        # 认证逻辑
│   ├── useFetch.ts       # 数据获取
│   ├── useForm.ts        # 表单处理
│   ├── usePagination.ts  # 分页逻辑
│   ├── useDebounce.ts    # 防抖函数
│   └── useLocalStorage.ts # 本地存储
│
├── directives/           # 自定义指令
│   ├── click-outside.ts  # 点击外部指令
│   ├── lazy-load.ts      # 懒加载指令
│   └── tooltip.ts        # 工具提示指令
│
├── middleware/           # 中间件（路由守卫等）
│   ├── auth.guard.ts     # 认证守卫
│   ├── permission.guard.ts # 权限守卫
│   └── logging.guard.ts  # 日志守卫
│
├── plugins/              # Vue插件
│   ├── i18n.ts          # 国际化插件
│   ├── toast.ts         # 消息提示插件
│   └── loading.ts       # 加载状态插件
│
├── router/               # 路由配置
│   ├── index.ts         # 路由主文件
│   ├── routes/          # 路由定义
│   │   ├── auth.routes.ts
│   │   ├── user.routes.ts
│   │   └── admin.routes.ts
│   ├── guards/          # 路由守卫
│   └── types/           # 路由类型定义
│
├── stores/               # Pinia Store
│   ├── auth.store.ts    # 认证状态
│   ├── user.store.ts    # 用户状态
│   ├── cart.store.ts    # 购物车状态
│   ├── ui.store.ts      # UI状态（主题、侧边栏等）
│   └── notification.store.ts # 通知状态
│
├── types/                # 全局类型定义
│   ├── global.d.ts      # 全局类型
│   ├── api.types.ts     # API类型
│   ├── store.types.ts   # Store类型
│   └── component.types.ts # 组件类型
│
├── utils/                # 工具函数
│   ├── validators.ts    # 验证函数
│   ├── formatters.ts    # 格式化函数
│   ├── helpers.ts       # 辅助函数
│   └── constants.ts     # 常量定义
│
├── views/                # 页面组件
│   ├── Home.vue         # 首页
│   ├── Login.vue        # 登录页
│   ├── Dashboard.vue    # 仪表板
│   ├── UserProfile.vue  # 用户资料
│   └── NotFound.vue     # 404页面
│
├── App.vue               # 根组件
└── main.ts               # 应用入口

// 路由懒加载
const UserProfile = defineAsyncComponent({
  loader: () => import('./views/UserProfile.vue'),
  loadingComponent: LoadingSpinner,  // 加载中显示的组件
  errorComponent: ErrorDisplay,      // 加载错误时显示的组件
  delay: 200,                        // 延迟显示loading，避免闪烁
  timeout: 3000,                     // 加载超时时间
  suspensible: true                  // 支持Suspense组件
})

// 路由配置中使用
const routes = [
  {
    path: '/profile',
    component: UserProfile
  }
]

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="cachedViews" :max="10">
      <component 
        :is="Component" 
        :key="route.fullPath"
      />
    </keep-alive>
  </router-view>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const cachedViews = ref<string[]>([])

// 只缓存标记了keepAlive的路由
watch(route, (to) => {
  if (to.meta.keepAlive) {
    const name = to.name?.toString()
    if (name && !cachedViews.value.includes(name)) {
      cachedViews.value.push(name)
      
      // 限制缓存数量，避免内存泄漏
      if (cachedViews.value.length > 10) {
        cachedViews.value.shift()
      }
    }
  }
}, { immediate: true })
</script>

<template>
  <VirtualScroller
    :items="items"
    :item-height="50"
    :buffer="200"
    key-field="id"
    @scroll="handleScroll"
  >
    <template #default="{ item, index }">
      <div class="list-item" :class="{ active: selectedId === item.id }">
        {{ item.name }}
      </div>
    </template>
    
    <template #loading>
      <div class="loading">加载中...</div>
    </template>
    
    <template #end>
      <div class="end">没有更多数据了</div>
    </template>
  </VirtualScroller>
</template>

<script setup>
import { VirtualScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

const items = ref([])
const selectedId = ref(null)

// 加载更多数据
const loadMore = async () => {
  const newItems = await api.loadMoreItems()
  items.value = [...items.value, ...newItems]
}

const handleScroll = (event) => {
  // 滚动到底部时加载更多
  const { scrollTop, scrollHeight, clientHeight } = event.target
  if (scrollHeight - scrollTop - clientHeight < 100) {
    loadMore()
  }
}
</script>

import { shallowRef, markRaw } from 'vue'

export const useDataStore = defineStore('data', () => {
  // 1. 大型列表使用shallowRef：只做浅层响应式
  // 适合：数据量大，但很少修改内部元素
  const largeList = shallowRef<HeavyItem[]>([])
  
  // 2. 静态配置使用markRaw：避免不必要的响应式开销
  // 适合：初始化后不再变化的数据
  const config = markRaw({
    apiUrl: 'https://api.example.com',
    timeout: 5000,
    retries: 3,
    features: {
      darkMode: true,
      notifications: false
    }
  })
  
  // 3. 频繁变化的数据考虑使用原始类型
  // 适合：动画帧、游戏状态等高频更新
  const frameCount = ref(0)
  let lastFrameTime = 0  // 使用普通变量，不响应式
  
  const updateFrame = (timestamp: number) => {
    const delta = timestamp - lastFrameTime
    lastFrameTime = timestamp
    
    // 只有需要UI更新的数据才用ref
    frameCount.value++
    
    // 不需要UI更新的计算使用普通变量
    const fps = 1000 / delta
    console.log('FPS:', fps)
  }
  
  return { largeList, config, frameCount, updateFrame }
})

export const useBatchStore = defineStore('batch', () => {
  const items = ref<Item[]>([])
  const updates = ref<Map<number, Partial<Item>>>(new Map())
  
  // 不好的做法：每次修改都触发更新
  const updateItemBad = (id: number, changes: Partial<Item>) => {
    const index = items.value.findIndex(item => item.id === id)
    if (index !== -1) {
      // 直接修改会立即触发响应式更新
      Object.assign(items.value[index], changes)
    }
  }
  
  // 好的做法：收集修改，批量更新
  const updateItemGood = (id: number, changes: Partial<Item>) => {
    // 先收集到Map中
    const existing = updates.value.get(id) || {}
    updates.value.set(id, { ...existing, ...changes })
  }
  
  // 批量提交更新
  const commitUpdates = () => {
    if (updates.value.size === 0) return
    
    // 使用$patch批量更新
    const store = useBatchStore()
    store.$patch((state) => {
      updates.value.forEach((changes, id) => {
        const index = state.items.findIndex(item => item.id === id)
        if (index !== -1) {
          Object.assign(state.items[index], changes)
        }
      })
    })
    
    // 清空更新记录
    updates.value.clear()
  }
  
  // 自动批量提交（使用微任务）
  const autoCommit = () => {
    if (!updates.value.size) return
    
    // 使用nextTick在下一次DOM更新前提交
    nextTick(() => {
      if (updates.value.size > 0) {
        commitUpdates()
      }
    })
  }
  
  return { items, updateItemGood, commitUpdates, autoCommit }
})

import { debounce, throttle } from 'lodash-es'
import { ref, watch, onUnmounted } from 'vue'

export function useOptimizedSearch() {
  const searchQuery = ref('')
  const searchResults = ref([])
  const isLoading = ref(false)
  
  // 防抖搜索：用户停止输入300ms后才执行搜索
  const debouncedSearch = debounce(async (query: string) => {
    if (!query.trim()) {
      searchResults.value = []
      return
    }
    
    isLoading.value = true
    try {
      const results = await api.search(query)
      searchResults.value = results
    } catch (error) {
      console.error('搜索失败:', error)
      searchResults.value = []
    } finally {
      isLoading.value = false
    }
  }, 300)
  
  // 监听搜索词变化
  watch(searchQuery, debouncedSearch)
  
  // 节流滚动：每200ms最多执行一次
  const throttledScroll = throttle((event: Event) => {
    const target = event.target as HTMLElement
    const { scrollTop, scrollHeight, clientHeight } = target
    
    // 滚动到底部时加载更多
    if (scrollHeight - scrollTop - clientHeight < 100) {
      loadMoreResults()
    }
  }, 200)
  
  // 组件卸载时清理
  onUnmounted(() => {
    debouncedSearch.cancel()
    throttledScroll.cancel()
  })
  
  return {
    searchQuery,
    searchResults,
    isLoading,
    throttledScroll
  }
}

// vite.config.js 或 webpack.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        // 代码分割策略
        manualChunks: {
          // 将Vue相关库打包到一起
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          
          // 将UI库打包到一起
          'ui-vendor': ['element-plus', '@element-plus/icons-vue'],
          
          // 将工具库打包到一起
          'utils-vendor': ['lodash-es', 'axios', 'dayjs'],
          
          // 按路由分块（自动）
          ...autoRouteChunks()
        },
        
        // 文件名包含内容哈希，便于缓存
        chunkFileNames: 'assets/[name]-[hash].js',
        entryFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    },
    
    // 生产环境优化
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,      // 移除console.log
        drop_debugger: true      // 移除debugger
      }
    },
    
    // 启用gzip压缩
    reportCompressedSize: true,
    
    // 优化依赖预构建
    optimizeDeps: {
      include: [
        'vue',
        'vue-router',
        'pinia',
        'element-plus'
      ]
    }
  }
}

<template>
  <router-link 
    :to="{ name: 'dashboard' }"
    @mouseenter="prefetchDashboard"
  >
    仪表板
  </router-link>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 鼠标悬停时预获取
const prefetchDashboard = () => {
  // 预获取仪表板路由
  router.resolve({ name: 'dashboard' }).then(route => {
    // 可以在这里预加载组件或数据
    console.log('预加载路由:', route)
  })
}

// 或者使用webpack魔法注释
const Dashboard = () => import(
  /* webpackChunkName: "dashboard" */
  /* webpackPrefetch: true */
  './views/Dashboard.vue'
)
</script>

<template>
  <!-- 使用WebP格式（如果支持） -->
  <picture>
    <source :srcset="webpSrc" type="image/webp">
    <img :src="fallbackSrc" :alt="alt" loading="lazy">
  </picture>
  
  <!-- 懒加载图片 -->
  <img 
    :src="placeholder" 
    :data-src="realSrc" 
    class="lazy-image"
    alt="描述"
  >
</template>

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

const props = defineProps({
  src: String,
  alt: String
})

// 转换为WebP格式
const webpSrc = computed(() => props.src.replace(/\.(jpg|png)$/, '.webp'))
const fallbackSrc = props.src

// 图片懒加载
const placeholder = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"%3E%3C/svg%3E'
const realSrc = ref(placeholder)

onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target as HTMLImageElement
        img.src = img.dataset.src!
        observer.unobserve(img)
      }
    })
  })
  
  const images = document.querySelectorAll('.lazy-image')
  images.forEach(img => observer.observe(img))
})
</script>

// Counter.vue 组件
<template>
  <div>
    <button @click="increment">+</button>
    <span data-testid="count">{{ count }}</span>
    <button @click="decrement">-</button>
  </div>
</template>

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

const count = ref(0)

const increment = () => {
  count.value++
}

const decrement = () => {
  count.value--
}
</script>

// Counter.spec.ts 测试文件
import { describe, it, expect, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'

describe('Counter组件', () => {
  it('正确渲染初始计数', () => {
    const wrapper = mount(Counter)
    expect(wrapper.find('[data-testid="count"]').text()).toBe('0')
  })
  
  it('点击+按钮增加计数', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button:first-child').trigger('click')
    expect(wrapper.find('[data-testid="count"]').text()).toBe('1')
  })
  
  it('点击-按钮减少计数', async () => {
    const wrapper = mount(Counter)
    // 先增加再减少
    await wrapper.find('button:first-child').trigger('click')
    await wrapper.find('button:last-child').trigger('click')
    expect(wrapper.find('[data-testid="count"]').text()).toBe('0')
  })
  
  it('支持props传入初始值', () => {
    const wrapper = mount(Counter, {
      props: {
        initialCount: 5
      }
    })
    expect(wrapper.find('[data-testid="count"]').text()).toBe('5')
  })
})

// useCounter.ts 组合式函数
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => {
    count.value++
  }
  
  const decrement = () => {
    count.value--
  }
  
  const reset = () => {
    count.value = initialValue
  }
  
  return {
    count,
    increment,
    decrement,
    reset
  }
}

// useCounter.spec.ts 测试文件
import { describe, it, expect, beforeEach } from 'vitest'
import { useCounter } from './useCounter'

describe('useCounter组合式函数', () => {
  it('使用默认初始值0', () => {
    const { count } = useCounter()
    expect(count.value).toBe(0)
  })
  
  it('使用自定义初始值', () => {
    const { count } = useCounter(5)
    expect(count.value).toBe(5)
  })
  
  it('increment增加计数', () => {
    const { count, increment } = useCounter()
    increment()
    expect(count.value).toBe(1)
  })
  
  it('decrement减少计数', () => {
    const { count, decrement } = useCounter(5)
    decrement()
    expect(count.value).toBe(4)
  })
  
  it('reset重置计数', () => {
    const { count, increment, reset } = useCounter(5)
    increment()
    increment()
    reset()
    expect(count.value).toBe(5)
  })
})

// counter.store.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    async incrementAsync() {
      await new Promise(resolve => setTimeout(resolve, 100))
      this.count++
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

// counter.store.spec.ts
import { describe, it, expect, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'
import { useCounterStore } from './counter.store'

describe('Counter Store', () => {
  beforeEach(() => {
    // 每个测试前创建一个新的pinia实例
    setActivePinia(createPinia())
  })
  
  it('初始状态为0', () => {
    const store = useCounterStore()
    expect(store.count).toBe(0)
  })
  
  it('increment增加计数', () => {
    const store = useCounterStore()
    store.increment()
    expect(store.count).toBe(1)
  })
  
  it('doubleCount计算两倍值', () => {
    const store = useCounterStore()
    store.count = 5
    expect(store.doubleCount).toBe(10)
  })
  
  it('incrementAsync异步增加计数', async () => {
    const store = useCounterStore()
    await store.incrementAsync()
    expect(store.count).toBe(1)
  })
})

// LoginForm.spec.ts
import { describe, it, expect, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import LoginForm from './LoginForm.vue'
import { createTestingPinia } from '@pinia/testing'
import { useAuthStore } from '@/stores/auth'

// Mock API调用
vi.mock('@/api/auth', () => ({
  login: vi.fn(() => Promise.resolve({ token: 'fake-token' }))
}))

describe('LoginForm集成测试', () => {
  it('登录成功后更新store状态', async () => {
    const wrapper = mount(LoginForm, {
      global: {
        plugins: [createTestingPinia({
          stubActions: false  // 不stub actions，实际执行
        })]
      }
    })
    
    // 获取store实例
    const authStore = useAuthStore()
    
    // 填写表单
    await wrapper.find('input[name="username"]').setValue('testuser')
    await wrapper.find('input[name="password"]').setValue('password123')
    
    // 提交表单
    await wrapper.find('form').trigger('submit.prevent')
    
    // 验证store状态更新
    expect(authStore.isAuthenticated).toBe(true)
    expect(authStore.user).toEqual({ username: 'testuser' })
  })
  
  it('登录失败显示错误信息', async () => {
    // Mock失败的API调用
    vi.mocked(api.auth.login).mockRejectedValueOnce(new Error('登录失败'))
    
    const wrapper = mount(LoginForm, {
      global: {
        plugins: [createTestingPinia()]
      }
    })
    
    // 提交表单
    await wrapper.find('form').trigger('submit.prevent')
    
    // 验证错误信息显示
    expect(wrapper.text()).toContain('登录失败')
  })
})

// auth.spec.ts
import { test, expect } from '@playwright/test'

test.describe('认证流程E2E测试', () => {
  test('完整登录登出流程', async ({ page }) => {
    // 1. 访问首页
    await page.goto('http://localhost:3000')
    
    // 2. 验证未登录状态
    await expect(page.locator('nav')).toContainText('登录')
    
    // 3. 导航到登录页
    await page.click('text=登录')
    await expect(page).toHaveURL('/login')
    
    // 4. 填写登录表单
    await page.fill('input[name="username"]', 'testuser')
    await page.fill('input[name="password"]', 'password123')
    
    // 5. 提交表单
    await page.click('button[type="submit"]')
    
    // 6. 验证登录成功
    await expect(page).toHaveURL('/dashboard')
    await expect(page.locator('nav')).toContainText('testuser')
    
    // 7. 执行一些需要认证的操作
    await page.click('text=个人资料')
    await expect(page).toHaveURL('/profile')
    
    // 8. 登出
    await page.click('text=退出登录')
    await expect(page).toHaveURL('/')
    await expect(page.locator('nav')).toContainText('登录')
  })
  
  test('权限控制', async ({ page }) => {
    // 使用不同权限的用户测试
    await page.goto('http://localhost:3000/login')
    
    // 管理员登录
    await page.fill('input[name="username"]', 'admin')
    await page.fill('input[name="password"]', 'admin123')
    await page.click('button[type="submit"]')
    
    // 验证管理员功能可用
    await expect(page.locator('nav')).toContainText('管理后台')
    await page.click('text=管理后台')
    await expect(page).toHaveURL('/admin')
    
    // 普通用户登录
    await page.click('text=退出登录')
    await page.fill('input[name="username"]', 'user')
    await page.fill('input[name="password"]', 'user123')
    await page.click('button[type="submit"]')
    
    // 验证普通用户无法访问管理后台
    await page.goto('http://localhost:3000/admin')
    await expect(page).toHaveURL('/forbidden')
    await expect(page.locator('h1')).toContainText('无权访问')
  })
})

// 性能测试
test.describe('性能测试', () => {
  test('首屏加载性能', async ({ page }) => {
    // 开始性能测量
    await page.goto('http://localhost:3000')
    
    const metrics = await page.evaluate(() => {
      const [navigationEntry] = performance.getEntriesByType('navigation')
      const [paintEntry] = performance.getEntriesByType('paint')
      
      return {
        loadTime: navigationEntry.loadEventEnd - navigationEntry.startTime,
        firstPaint: paintEntry.startTime,
        domContentLoaded: navigationEntry.domContentLoadedEventEnd - navigationEntry.startTime
      }
    })
    
    // 性能断言
    expect(metrics.loadTime).toBeLessThan(3000)        // 3秒内完全加载
    expect(metrics.firstPaint).toBeLessThan(1000)      // 1秒内首次绘制
    expect(metrics.domContentLoaded).toBeLessThan(1500) // 1.5秒内DOM加载
  })
})

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue()],
  
  test: {
    globals: true,
    environment: 'jsdom',
    
    // 覆盖率配置
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      exclude: [
        'node_modules/',
        'src/setupTests.ts'
      ]
    },
    
    // 测试文件匹配
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    
    // Mock配置
    setupFiles: ['./src/setupTests.ts'],
    
    // 别名配置
    alias: {
      '@': '/src'
    }
  }
})