Vue 系列：从入门到组件化开发

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue';

// ref：包装基本类型和对象（推荐）
const count = ref(0);
const message = ref('Hello Vue 3');
const user = ref({ name: 'Alice', age: 25 });

// reactive：包装对象（有局限性）
const state = reactive({
  count: 0,
  items: []
});

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

// 可写计算属性
const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

// watch：监听数据变化
watch(count, (newVal, oldVal) => {
  console.log(`count changed: ${oldVal} → ${newVal}`);
});

// 监听多个源
watch([count, message], ([newCount, newMsg]) => {
  console.log(`count: ${newCount}, msg: ${newMsg}`);
});

// watchEffect：自动追踪依赖
watchEffect(() => {
  console.log(`count is: ${count.value}`);
  // 自动追踪 count.value，无需显式声明
});

// 方法
function increment() {
  count.value++;  // ref 在 script 中需要 .value
}
</script>

<template>
  <!-- template 中自动解包，不需要 .value -->
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

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

  <!-- v-bind：动态绑定属性（简写 :） -->
  <img :src="imageUrl" :alt="imageAlt">
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :style="{ color: textColor, fontSize: size + 'px' }"></div>

  <!-- v-on：事件监听（简写 @） -->
  <button @click="handleClick">点击</button>
  <input @keyup.enter="submit" @input="handleInput">
  <div @click.stop="stopPropagation">阻止冒泡</div>
  <form @submit.prevent="onSubmit">阻止默认</form>

  <!-- v-model：双向绑定 -->
  <input v-model="username" placeholder="用户名">
  <!-- 等价于 -->
  <input :value="username" @input="username = $event.target.value">

  <!-- v-model 修饰符 -->
  <input v-model.lazy="msg">       <!-- change 事件时更新 -->
  <input v-model.number="age">     <!-- 自动转为数字 -->
  <input v-model.trim="text">      <!-- 去除首尾空格 -->

  <!-- v-if / v-else-if / v-else：条件渲染 -->
  <div v-if="type === 'A'">类型 A</div>
  <div v-else-if="type === 'B'">类型 B</div>
  <div v-else>其他类型</div>

  <!-- v-show：条件显示（始终渲染，切换 display） -->
  <div v-show="isVisible">可见/隐藏切换</div>

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

  <!-- v-for 遍历对象 -->
  <li v-for="(value, key, index) in user" :key="key">
    {{ key }}: {{ value }}
  </li>

  <!-- v-once：只渲染一次 -->
  <span v-once>这个值不会更新：{{ expensiveComputation }}</span>

  <!-- v-html：渲染 HTML（⚠️ 注意 XSS 风险） -->
  <div v-html="trustedHtml"></div>
</template>

<!-- ===== 父组件 ===== -->
<template>
  <ChildComponent
    :title="postTitle"
    :likes="42"
    @update="handleUpdate"
  />
</template>

<!-- ===== 子组件 ChildComponent.vue ===== -->
<script setup lang="ts">
// Props 定义
interface Props {
  title: string;
  likes?: number;        // 可选
  tags?: string[];       // 带默认值
}

const props = withDefaults(defineProps<Props>(), {
  likes: 0,
  tags: () => []
});

// Emits 定义
const emit = defineEmits<{
  update: [value: string];         // 单参数
  delete: [id: number];            // 单参数
  'update:modelValue': [value: any]; // v-model 事件
}>();

function handleClick() {
  emit('update', 'new value');
}
</script>

<template>
  <div>
    <h3>{{ props.title }}</h3>
    <p>Likes: {{ props.likes }}</p>
    <button @click="handleClick">更新</button>
  </div>
</template>

<script setup>
import {
  onBeforeMount, onMounted,
  onBeforeUpdate, onUpdated,
  onBeforeUnmount, onUnmounted,
  onActivated, onDeactivated,    // <KeepAlive> 专用
  onErrorCaptured,
} from 'vue';

// 初始化（setup 本身 = beforeCreate + created）
console.log('组件初始化');

onBeforeMount(() => {
  // 渲染前，DOM 尚未创建
});

onMounted(() => {
  // DOM 已挂载，可以操作 DOM、发起请求
  fetchData();
});

onBeforeUpdate(() => {
  // 数据变化，DOM 更新前
});

onUpdated(() => {
  // DOM 已更新
});

onBeforeUnmount(() => {
  // 组件卸载前，清理定时器、事件监听
  clearInterval(timer);
});

onUnmounted(() => {
  // 组件已卸载
});
</script>

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),  // 懒加载
  },
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: () => import('@/views/UserDetail.vue'),
    props: true,  // 将 params 作为 props 传递
    meta: { requiresAuth: true },
  },
  {
    path: '/admin',
    component: () => import('@/layouts/AdminLayout.vue'),
    children: [
      {
        path: '',            // /admin
        component: () => import('@/views/admin/Dashboard.vue'),
      },
      {
        path: 'users',       // /admin/users
        component: () => import('@/views/admin/Users.vue'),
      },
    ],
  },
  {
    path: '/:pathMatch(.*)*',  // 404 通配
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) return savedPosition;
    return { top: 0 };
  },
});

// 路由守卫
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { name: 'Login', query: { redirect: to.fullPath } };
  }
});

export default router;

<!-- 组件中使用路由 -->
<script setup>
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 编程式导航
function goToUser(id: number) {
  router.push({ name: 'UserDetail', params: { id } });
}

// 获取参数
const userId = computed(() => route.params.id);
const searchQuery = computed(() => route.query.q);

// 路由信息
console.log(route.path, route.name, route.meta);
</script>

<template>
  <nav>
    <!-- 声明式导航 -->
    <router-link to="/">首页</router-link>
    <router-link :to="{ name: 'UserDetail', params: { id: 123 } }">
      用户 123
    </router-link>
  </nav>

  <!-- 路由出口 -->
  <router-view v-slot="{ Component, route }">
    <transition name="fade" mode="out-in">
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
</template>

// stores/user.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useUserStore = defineStore('user', () => {
  // State
  const user = ref<User | null>(null);
  const token = ref<string>('');

  // Getters（computed）
  const isLoggedIn = computed(() => !!token.value);
  const userName = computed(() => user.value?.name ?? '游客');

  // Actions
  async function login(credentials: { email: string; password: string }) {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials),
    });
    const data = await response.json();
    user.value = data.user;
    token.value = data.token;
    localStorage.setItem('token', data.token);
  }

  function logout() {
    user.value = null;
    token.value = '';
    localStorage.removeItem('token');
  }

  // 也可以使用选项式风格
  // ...

  return { user, token, isLoggedIn, userName, login, logout };
});

// composables/useFetch.ts
import { ref, watchEffect, toValue, type MaybeRefOrGetter } from 'vue';

export function useFetch<T>(url: MaybeRefOrGetter<string>) {
  const data = ref<T | null>(null);
  const error = ref<Error | null>(null);
  const loading = ref(false);

  async function execute() {
    loading.value = true;
    error.value = null;
    try {
      const response = await fetch(toValue(url));
      data.value = await response.json();
    } catch (e) {
      error.value = e as Error;
    } finally {
      loading.value = false;
    }
  }

  // url 变化时自动重新请求
  watchEffect(() => {
    toValue(url);  // 追踪依赖
    execute();
  });

  return { data, error, loading, refetch: execute };
}

// 使用
const { data: users, loading } = useFetch<User[]>('/api/users');