PHP后端优化 + Vue3.5/Nuxt4前端工程化实战

<template>
  <!-- 大数据表格现在流畅多了 -->
  <table v-if="items.length">
    <tr v-for="item in filteredItems" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ formatPrice(item.price) }}</td>
    </tr>
  </table>
</template>

<script setup lang="ts">
// 之前：defineProps解构会丢失响应式，得用toRefs
const props = defineProps<{
  data: Array<Record<string, any>>;
  filterText: string;
}>();

// 需要手动转ref
const { filterText } = toRefs(props);
const filteredItems = computed(() => {
  return props.data.filter(
    (item) => item.name.includes(filterText.value), // 这里还要.value
  );
});

// 现在：解构后自动保持响应式，代码清爽多了
const { data, filterText } = defineProps<{
  data: Array<{ id: number; name: string; price: number }>;
  filterText: string;
}>();

// filterText直接就是响应式的，不用.value
const filteredItems = computed(() =>
  data.filter((item) => item.name.includes(filterText)),
);

// SSR的ID一致性问题也解决了
const inputId = useId(); // 服务端客户端自动同步
</script>

<style>
/* CSS原生嵌套，不用SCSS也能写层级 */
table {
  width: 100%;

  tr {
    &:hover {
      background: #f5f5f5;
    }

    td {
      padding: 12px;
      border-bottom: 1px solid #eee;
    }
  }
}
</style>

<!-- app/pages/dashboard/index.vue -->
<template>
  <div>
    <h1>欢迎回来，{{ user.name }}！</h1>
    <!-- 后台特有的图表组件等 -->
  </div>
</template>

<script setup>
// 指定用admin布局，一行配置
definePageMeta({
  layout: 'admin',
  middleware: 'auth' // 顺便加个路由守卫
})

// 全栈数据获取：服务端渲染时就拿到数据
const { data: user } = await useFetch('/api/current-user', {
  // Nuxt 4的Server API直接在app/server/api下写
  // 类型安全，不用来回切换文件
})

// 类型安全拉满
interface DashboardStats {
  visits: number
  revenue: number
}
const stats = ref<DashboardStats>({ visits: 0, revenue: 0 })
</script>

<!-- app/layouts/admin.vue -->
<template>
  <div class="admin-layout">
    <AdminSidebar />
    <main class="main-content">
      <slot />
      <!-- 页面内容自动插入这里 -->
    </main>
    <AdminFooter />
  </div>
</template>