Vue3 Composition API：深入理解与实战应用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

// 响应式数据
const count = ref(0);

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

// 方法
const increment = () => {
  count.value++;
};

// 生命周期钩子
onMounted(() => {
  console.log('Component mounted with count:', count.value);
});
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { ref } from 'vue';

// 创建基本类型的响应式数据
const count = ref(0);
const message = ref('Hello');

// 创建对象类型的响应式数据
const user = ref({
  name: 'Alice',
  age: 25
});

// 修改值
count.value++;
user.value.age = 26;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import { reactive } from 'vue';

// 创建响应式对象
const state = reactive({
  count: 0,
  user: {
    name: 'Bob',
    address: {
      city: 'Beijing',
      street: 'Main St'
    }
  },
  items: [1, 2, 3]
});

// 直接修改属性
state.count++;
state.user.address.city = 'Shanghai';
state.items.push(4);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

// 只读计算属性
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

// 可写计算属性
const fullName2 = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (newValue) => {
    const parts = newValue.split(' ');
    firstName.value = parts[0] || '';
    lastName.value = parts[1] || '';
  }
});

// 使用
fullName2.value = 'Jane Smith';

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import { ref, reactive, watch, watchEffect } from 'vue';

const count = ref(0);
const state = reactive({ name: 'Alice', age: 25 });

// 监听 ref
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

// 监听 reactive 对象的特定属性
watch(
  () => state.name,
  (newName, oldName) => {
    console.log(`Name changed from ${oldName} to ${newName}`);
  }
);

// 监听多个源
watch(
  [count, () => state.age],
  ([newCount, newAge], [oldCount, oldAge]) => {
    console.log(`Count changed: ${oldCount} -> ${newCount}`);
    console.log(`Age changed: ${oldAge} -> ${newAge}`);
  }
);

// 立即执行的监听
watchEffect(() => {
  console.log(`Count is: ${count.value}, Age is: ${state.age}`);
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import {
  onMounted,
  onUpdated,
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered
} from 'vue';

// 组件挂载后
onMounted(() => {
  console.log('Component mounted');
});

// 组件更新前
onBeforeUpdate(() => {
  console.log('Component about to update');
});

// 错误捕获
onErrorCaptured((error, instance, info) => {
  console.error('Error captured:', error, info);
  // 返回 true 可以阻止错误继续传播
  return false;
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// 父组件
import { provide, ref } from 'vue';

const currentUser = ref({ name: 'Admin', role: 'admin' });
const updateUser = (user) => {
  currentUser.value = user;
};

provide('user', {
  currentUser,
  updateUser
});

// 子组件
import { inject, Ref } from 'vue';

const user = inject('user');
console.log(user.currentUser.value.name);
user.updateUser({ name: 'New Admin', role: 'admin' });

// 带默认值的注入
const theme = inject('theme', 'light');

// 类型安全的注入
interface User {
  name: string;
  role: string;
}

interface UserProvide {
  currentUser: Ref<User>;
  updateUser: (user: User) => void;
}

const user = inject<UserProvide>('user');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// 简化的 reactive 实现原理
function reactive(target) {
  // 检查目标是否为对象
  if (typeof target !== 'object' || target === null) {
    return target;
  }
  
  // 创建 Proxy 代理
  return new Proxy(target, {
    get(target, key, receiver) {
      // 收集依赖
      track(target, key);
      // 获取属性值
      const result = Reflect.get(target, key, receiver);
      // 递归处理嵌套对象
      if (typeof result === 'object' && result !== null) {
        return reactive(result);
      }
      return result;
    },
    set(target, key, value, receiver) {
      // 设置新值
      const result = Reflect.set(target, key, value, receiver);
      // 触发更新
      trigger(target, key);
      return result;
    },
    deleteProperty(target, key) {
      // 删除属性
      const result = Reflect.deleteProperty(target, key);
      // 触发更新
      trigger(target, key);
      return result;
    }
  });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// 简化的 ref 实现原理
function ref(value) {
  // 创建一个带有 value 属性的对象
  const refObject = {
    _isRef: true, // 标记为 ref 对象
    get value() {
      // 收集依赖
      track(refObject, 'value');
      return value;
    },
    set value(newValue) {
      // 仅当值改变时更新
      if (newValue !== value) {
        value = newValue;
        // 触发更新
        trigger(refObject, 'value');
      }
    }
  };
  
  return refObject;
}

// unref 辅助函数 - 获取 ref 的原始值
function unref(ref) {
  return isRef(ref) ? ref.value : ref;
}

// isRef 辅助函数 - 检查是否为 ref 对象
function isRef(value) {
  return !!value && value._isRef === true;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// 简化的 computed 实现原理
function computed(getterOrOptions) {
  // 确定是 getter 函数还是 options 对象
  let getter;
  let setter;
  
  if (typeof getterOrOptions === 'function') {
    getter = getterOrOptions;
    setter = () => console.warn('Write operation failed: computed value is readonly');
  } else {
    getter = getterOrOptions.get;
    setter = getterOrOptions.set;
  }
  
  // 用于存储计算结果的变量
  let dirty = true;
  let value;
  
  // 创建计算属性的 effect
  const effect = effect(getter, {
    lazy: true,
    scheduler: () => {
      if (!dirty) {
        dirty = true;
        // 通知依赖更新
        trigger(ref, 'value');
      }
    }
  });
  
  // 创建 ref 对象
  const ref = {
    _isRef: true,
    get value() {
      // 如果计算值已过期，重新计算
      if (dirty) {
        value = effect();
        dirty = false;
      }
      // 收集依赖
      track(ref, 'value');
      return value;
    },
    set value(newValue) {
      setter(newValue);
    }
  };
  
  return ref;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// src/composables/useCounter.ts
import { ref, computed } from 'vue';

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

// 使用示例
const { count, doubleCount, increment } = useCounter(10);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

// src/composables/useApi.ts
import { ref, computed, onUnmounted } from 'vue';

export function useApi<T>(url: string) {
  const data = ref<T | null>(null);
  const loading = ref(false);
  const error = ref<string | null>(null);
  const controller = new AbortController();
  
  const fetchData = async () => {
    loading.value = true;
    error.value = null;
    
    try {
      const response = await fetch(url, {
        signal: controller.signal
      });
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      data.value = await response.json();
    } catch (err) {
      if (err.name !== 'AbortError') {
        error.value = err.message || 'Failed to fetch data';
      }
    } finally {
      loading.value = false;
    }
  };
  
  const isSuccess = computed(() => data.value !== null && !error.value);
  
  // 自动清理
  onUnmounted(() => {
    controller.abort();
  });
  
  return {
    data,
    loading,
    error,
    isSuccess,
    fetchData
  };
}

// 使用示例
const { data: posts, loading, error, fetchData } = useApi<Post[]>('/api/posts');
fetchData();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// src/composables/useEventListener.ts
import { onMounted, onUnmounted } from 'vue';

export function useEventListener(
  target: EventTarget | Ref<EventTarget | null | undefined>,
  event: string,
  callback: EventListenerOrEventListenerObject
) {
  let currentTarget: EventTarget | null = null;
  
  // 从 ref 中获取目标或直接使用目标
  const getTarget = () => {
    return isRef(target) ? target.value : target;
  };
  
  const cleanup = () => {
    if (currentTarget) {
      currentTarget.removeEventListener(event, callback);
      currentTarget = null;
    }
  };
  
  onMounted(() => {
    const el = getTarget();
    if (el) {
      currentTarget = el;
      currentTarget.addEventListener(event, callback);
    }
  });
  
  onUnmounted(cleanup);
  
  return {
    cleanup
  };
}

// 使用示例
const { cleanup } = useEventListener(
  window,
  'resize',
  () => console.log('Window resized')
);

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

// src/composables/useDataTable.ts
import { ref, computed, reactive, watch } from 'vue';

interface Pagination {
  page: number;
  pageSize: number;
  total: number;
  totalPages: number;
}

interface FilterOptions {
  [key: string]: any;
}

interface SortOptions {
  field: string;
  direction: 'asc' | 'desc';
}

export function useDataTable<T>(fetchFn: Function) {
  // 状态
  const items = ref<T[]>([]);
  const loading = ref(false);
  const error = ref<string | null>(null);
  
  // 分页
  const pagination = reactive<Pagination>({
    page: 1,
    pageSize: 10,
    total: 0,
    totalPages: 0
  });
  
  // 筛选
  const filters = reactive<FilterOptions>({});
  
  // 排序
  const sort = reactive<SortOptions>({
    field: '',
    direction: 'asc'
  });
  
  // 计算属性
  const pageNumbers = computed(() => {
    const numbers = [];
    const totalPages = pagination.totalPages;
    const current = pagination.page;
    
    // 生成页码数组
    let start = Math.max(1, current - 2);
    let end = Math.min(totalPages, start + 4);
    
    if (end - start < 4) {
      start = Math.max(1, end - 4);
    }
    
    for (let i = start; i <= end; i++) {
      numbers.push(i);
    }
    
    return numbers;
  });
  
  // 加载数据
  const loadData = async () => {
    loading.value = true;
    error.value = null;
    
    try {
      const params = {
        page: pagination.page,
        pageSize: pagination.pageSize,
        ...filters,
        sortBy: sort.field,
        sortDirection: sort.direction
      };
      
      const response = await fetchFn(params);
      items.value = response.data;
      pagination.total = response.meta.total;
      pagination.totalPages = Math.ceil(response.meta.total / pagination.pageSize);
    } catch (err: any) {
      error.value = err.message || 'Failed to load data';
    } finally {
      loading.value = false;
    }
  };
  
  // 分页方法
  const setPage = (page: number) => {
    pagination.page = page;
  };
  
  const setPageSize = (size: number) => {
    pagination.pageSize = size;
    pagination.page = 1; // 重置到第一页
  };
  
  const nextPage = () => {
    if (pagination.page < pagination.totalPages) {
      pagination.page++;
    }
  };
  
  const prevPage = () => {
    if (pagination.page > 1) {
      pagination.page--;
    }
  };
  
  // 排序方法
  const setSort = (field: string) => {
    if (sort.field === field) {
      // 切换排序方向
      sort.direction = sort.direction === 'asc' ? 'desc' : 'asc';
    } else {
      sort.field = field;
      sort.direction = 'asc';
    }
  };
  
  // 筛选方法
  const setFilter = (key: string, value: any) => {
    filters[key] = value;
    pagination.page = 1; // 重置到第一页
  };
  
  const clearFilters = () => {
    Object.keys(filters).forEach(key => {
      delete filters[key];
    });
    pagination.page = 1;
  };
  
  // 重置表格
  const resetTable = () => {
    pagination.page = 1;
    pagination.pageSize = 10;
    clearFilters();
    sort.field = '';
    sort.direction = 'asc';
  };
  
  // 监听分页、筛选和排序变化，自动重新加载数据
  watch(
    [() => pagination.page, () => pagination.pageSize, filters, sort],
    () => {
      loadData();
    },
    { deep: true }
  );
  
  return {
    items,
    loading,
    error,
    pagination,
    filters,
    sort,
    pageNumbers,
    loadData,
    setPage,
    setPageSize,
    nextPage,
    prevPage,
    setSort,
    setFilter,
    clearFilters,
    resetTable
  };
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250

<template>
  <div class="data-table">
    <!-- 工具栏 -->
    <div class="table-toolbar" v-if="showToolbar">
      <slot name="toolbar"></slot>
      
      <!-- 搜索框 -->
      <el-input
        v-if="searchable"
        v-model="searchQuery"
        placeholder="搜索..."
        prefix-icon="el-icon-search"
        clearable
        @clear="handleSearch"
        @keyup.enter="handleSearch"
      />
    </div>
    
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="items"
      style="width: 100%"
      @sort-change="handleSortChange"
      v-bind="tableProps"
    >
      <template v-for="column in columns" :key="column.prop">
        <el-table-column
          v-if="column.type !== 'selection'"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :min-width="column.minWidth"
          :sortable="column.sortable || false"
          :align="column.align || 'left'"
          :fixed="column.fixed || false"
        >
          <template #default="scope">
            <slot :name="column.prop" v-bind="{ row: scope.row, column }">
              {{ formatValue(scope.row[column.prop], column) }}
            </slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          type="selection"
          width="55"
          :fixed="column.fixed || false"
        />
      </template>
      
      <!-- 操作列 -->
      <el-table-column
        v-if="showActions"
        label="操作"
        width="180"
        fixed="right"
      >
        <template #default="scope">
          <slot name="actions" v-bind="{ row: scope.row }"></slot>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页 -->
    <div class="table-pagination">
      <div class="pagination-info">
        共 {{ pagination.total }} 条记录，第 {{ pagination.page }} / {{ pagination.totalPages }} 页
      </div>
      
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="prev, pager, next, jumper, sizes"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    
    <!-- 空状态 -->
    <div v-if="!loading && items.length === 0" class="empty-state">
      <el-empty description="暂无数据"></el-empty>
    </div>
    
    <!-- 错误状态 -->
    <div v-if="error" class="error-state">
      <el-alert
        :title="error"
        type="error"
        show-icon
        :closable="false"
      />
      <el-button type="primary" @click="refresh">重试</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useDataTable } from '@/composables/useDataTable';

interface Column {
  prop: string;
  label: string;
  width?: number | string;
  minWidth?: number | string;
  align?: 'left' | 'center' | 'right';
  fixed?: boolean | 'left' | 'right';
  sortable?: boolean | 'custom';
  type?: 'selection';
  formatter?: (value: any, row: any) => any;
}

interface TableProps {
  columns: Column[];
  fetchData: Function;
  showToolbar?: boolean;
  searchable?: boolean;
  showActions?: boolean;
  [key: string]: any;
}

const props = withDefaults(defineProps<TableProps>(), {
  showToolbar: true,
  searchable: false,
  showActions: true
});

const emit = defineEmits<{
  (e: 'selection-change', rows: any[]): void;
  (e: 'sort-change', { column, prop, order }: { column: any, prop: string, order: string }): void;
}>();

const searchQuery = ref('');

// 使用数据表格组合式函数
const {
  items,
  loading,
  error,
  pagination,
  loadData,
  setPage,
  setPageSize,
  setSort,
  setFilter
} = useDataTable(props.fetchData);

// 格式化值
const formatValue = (value: any, column: Column) => {
  if (column.formatter) {
    return column.formatter(value, { ...value });
  }
  
  // 默认格式化
  if (value === null || value === undefined) {
    return '-';
  }
  
  if (typeof value === 'boolean') {
    return value ? '是' : '否';
  }
  
  // 格式化日期
  if (value instanceof Date || (typeof value === 'string' && value.includes('-'))) {
    const date = new Date(value);
    if (!isNaN(date.getTime())) {
      return date.toLocaleDateString();
    }
  }
  
  return value;
};

// 搜索处理
const handleSearch = () => {
  setFilter('search', searchQuery.value);
};

// 排序处理
const handleSortChange = (sort: { column: any, prop: string, order: string }) => {
  emit('sort-change', sort);
  
  if (sort.prop && sort.order) {
    setSort(sort.prop);
  }
};

// 分页处理
const handleSizeChange = (size: number) => {
  setPageSize(size);
};

const handleCurrentChange = (current: number) => {
  setPage(current);
};

// 刷新数据
const refresh = () => {
  loadData();
};

// 暴露方法给父组件
defineExpose({
  refresh,
  setFilter,
  loadData
});

// 初始化加载数据
loadData();
</script>

<style scoped>
.data-table {
  background: #fff;
  border-radius: 4px;
  padding: 16px;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.pagination-info {
  color: #606266;
}

.empty-state,
.error-state {
  padding: 40px 0;
  text-align: center;
}

.error-state button {
  margin-top: 16px;
}
</style>

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

<template>
  <div class="users-page">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>用户管理</span>
          <el-button type="primary" @click="showAddUserDialog = true">
            <i class="el-icon-plus"></i>
            添加用户
          </el-button>
        </div>
      </template>
      
      <AdvancedDataTable
        ref="tableRef"
        :columns="columns"
        :fetch-data="fetchUsers"
        :searchable="true"
        :show-actions="true"
        @sort-change="handleSort"
      >
        <!-- 自定义工具栏 -->
        <template #toolbar>
          <el-select
            v-model="roleFilter"
            placeholder="按角色筛选"
            clearable
            @change="handleRoleFilter"
          >
            <el-option label="管理员" value="admin"></el-option>
            <el-option label="用户" value="user"></el-option>
          </el-select>
          
          <el-button type="info" @click="exportUsers">
            <i class="el-icon-download"></i>
            导出用户
          </el-button>
        </template>
        
        <!-- 自定义状态列 -->
        <template #status="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
            {{ row.status === 'active' ? '活跃' : '禁用' }}
          </el-tag>
        </template>
        
        <!-- 自定义操作列 -->
        <template #actions="{ row }">
          <el-button type="primary" size="small" @click="editUser(row)">
            编辑
          </el-button>
          <el-button 
            :type="row.status === 'active' ? 'danger' : 'success'" 
            size="small" 
            @click="toggleUserStatus(row)"
          >
            {{ row.status === 'active' ? '禁用' : '启用' }}
          </el-button>
          <el-button type="danger" size="small" @click="deleteUser(row)">
            删除
          </el-button>
        </template>
      </AdvancedDataTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AdvancedDataTable from '@/components/AdvancedDataTable.vue';
import { userApi } from '@/services/api';
import { ElMessage, ElMessageBox } from 'element-plus';

const tableRef = ref();
const roleFilter = ref('');
const showAddUserDialog = ref(false);

// 表格列定义
const columns = [
  {
    prop: 'id',
    label: 'ID',
    width: 80,
    align: 'center'
  },
  {
    prop: 'username',
    label: '用户名',
    minWidth: 120,
    sortable: 'custom'
  },
  {
    prop: 'email',
    label: '邮箱',
    minWidth: 200
  },
  {
    prop: 'role',
    label: '角色',
    width: 100,
    align: 'center',
    sortable: 'custom'
  },
  {
    prop: 'status',
    label: '状态',
    width: 100,
    align: 'center'
  },
  {
    prop: 'createdAt',
    label: '创建时间',
    width: 180,
    align: 'center',
    sortable: 'custom',
    formatter: (value: string) => {
      return new Date(value).toLocaleString();
    }
  }
];

// 获取用户数据
const fetchUsers = async (params: any) => {
  try {
    const response = await userApi.getUsers(params);
    return {
      data: response.data,
      meta: {
        total: response.meta.total,
        page: response.meta.page,
        perPage: response.meta.perPage
      }
    };
  } catch (error) {
    ElMessage.error('获取用户列表失败');
    throw error;
  }
};

// 处理排序
const handleSort = (sort: any) => {
  console.log('Sort:', sort);
};

// 角色筛选
const handleRoleFilter = () => {
  tableRef.value.setFilter('role', roleFilter.value);
};

// 编辑用户
const editUser = (user: any) => {
  showAddUserDialog.value = true;
  console.log('Edit user:', user);
};

// 切换用户状态
const toggleUserStatus = async (user: any) => {
  try {
    const newStatus = user.status === 'active' ? 'inactive' : 'active';
    await userApi.updateUserStatus(user.id, newStatus);
    tableRef.value.refresh();
    ElMessage.success(`用户已${newStatus === 'active' ? '启用' : '禁用'}`);
  } catch (error) {
    ElMessage.error('操作失败');
  }
};

// 删除用户
const deleteUser = async (user: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除用户「${user.username}」吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );
    
    await userApi.deleteUser(user.id);
    tableRef.value.refresh();
    ElMessage.success('用户删除成功');
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败');
    }
  }
};

// 导出用户
const exportUsers = async () => {
  try {
    await userApi.exportUsers();
    ElMessage.success('导出成功');
  } catch (error) {
    ElMessage.error('导出失败');
  }
};
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { markRaw, ref } from 'vue';
import { Chart } from 'chart.js';

// 第三方库实例不需要响应式
const chartInstance = ref(null);

onMounted(() => {
  const ctx = canvas.value.getContext('2d');
  // 使用 markRaw 跳过响应式转换
  chartInstance.value = markRaw(new Chart(ctx, options));
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import { shallowRef, shallowReactive } from 'vue';

// 只有根级属性是响应式的
const shallowObj = shallowReactive({
  name: '浅层响应式',
  // 这个对象的属性不是响应式的
  details: {
    age: 25,
    address: '...'
  }
});

// 只有 .value 是响应式的
const shallowData = shallowRef({
  // 这个对象的属性不是响应式的
  nested: {
    value: 1
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { reactive, toRefs } from 'vue';

const state = reactive({
  name: 'Vue 3',
  version: '3.3.4'
});

// 使用 toRefs 解构保持响应性
const { name, version } = toRefs(state);

// 现在可以直接使用 name.value 和 version.value

1
2
3
4
5
6
7

<template>
  <div v-for="item in items" v-memo="[item.id, item.updatedAt]">
    <h3>{{ item.title }}</h3>
    <p>{{ item.content }}</p>
    <span>{{ item.updatedAt }}</span>
  </div>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

// 异步组件
const AsyncComponent = defineAsyncComponent(() => 
  import('./HeavyComponent.vue')
);
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23