Vue 3 组合式 API 深度实战：从响应式原理到工程化实践#

1
// Vue 2 的方式 - 无法检测新增属性
2
Object.defineProperty(obj, 'key', {
3
  get() { return value },
4
  set(newVal) { value = newVal }
5
});
6

7
// Vue 3 的方式 - Proxy 可以代理整个对象
8
const proxy = new Proxy(target, {
9
  get(target, key) { return target[key] },
10
  set(target, key, value) { target[key] = value; return true }
11
});

1
import { ref, reactive } from 'vue';
2

3
// ref：用于基本类型
4
const count = ref(0);
5
console.log(count.value); // 访问值需要 .value
6

7
// reactive：用于对象
8
const state = reactive({
9
  name: 'Vue',
10
  version: 3
11
});
12
console.log(state.name); // 直接访问属性
13

14
// 最佳实践
15
const user = reactive({
16
  profile: ref({
17
    name: '张三',
18
    age: 25
19
  })
20
});
21
// 访问：user.profile.name（不需要 .value，因为 reactive 会解包）

1
import { ref, computed, watch, watchEffect } from 'vue';
2

3
// computed
4
const firstName = ref('张');
5
const lastName = ref('三');
6
const fullName = computed(() => firstName.value + lastName.value);
7

8
// 可写的 computed
9
const fullNameWritable = computed({
10
  get: () => firstName.value + lastName.value,
11
  set: (val) => {
12
    [firstName.value, lastName.value] = val.split(' ');
13
  }
14
});
15

16
// watch - 懒执行，可以访问新旧值
17
watch(count, (newVal, oldVal) => {
18
  console.log('count changed:', oldVal, '->', newVal);
19
});
20

21
// watchEffect - 立即执行，自动追踪依赖
22
watchEffect(() => {
23
  console.log('count is:', count.value);
24
});

1
<script setup>
2
import { ref, onMounted } from 'vue';
3

4
// 直接声明响应式数据
5
const count = ref(0);
6
const message = ref('Hello Vue 3');
7

8
// 方法
9
const increment = () => {
10
  count.value++;
11
};
12

13
// 生命周期钩子
14
onMounted(() => {
15
  console.log('Component mounted');
16
});
17
</script>
18

19
<template>
20
  <div>
21
    <p>{{ message }}</p>
22
    <p>Count: {{ count }}</p>
23
    <button @click="increment">+1</button>
24
  </div>
25
</template>

1
// 异步组件
2
import { defineAsyncComponent } from 'vue';
3

4
const AsyncComp = defineAsyncComponent(() =>
5
  import('./components/HeavyComponent.vue')
6
);
7

8
// 带加载状态的异步组件
9
const AsyncCompWithLoading = defineAsyncComponent({
10
  loader: () => import('./components/HeavyComponent.vue'),
11
  loadingComponent: LoadingComponent,
12
  errorComponent: ErrorComponent,
13
  delay: 200,
14
  timeout: 3000
15
});

1
<template>
2
  <div v-memo="[valueA, valueB]">
3
    <!-- 只有当 valueA 或 valueB 变化时才会重新渲染 -->
4
    <span>{{ valueA }} - {{ valueB }}</span>
5
  </div>
6
</template>

1
<script setup>
2
import { ref, computed } from 'vue';
3

4
const items = ref(Array.from({ length: 10000 }, (_, i) => ({
5
  id: i,
6
  text: `Item ${i}`
7
})));
8

9
const containerHeight = 500;
10
const itemHeight = 50;
11
const scrollTop = ref(0);
12

13
const visibleItems = computed(() => {
14
  const start = Math.floor(scrollTop.value / itemHeight);
15
  const end = start + Math.ceil(containerHeight / itemHeight);
16
  return items.value.slice(start, end).map((item, index) => ({
17
    ...item,
18
    index: start + index
19
  }));
20
});
21
</script>
22

23
<template>
24
  <div
25
    class="container"
26
    :style="{ height: containerHeight + 'px', overflow: 'auto' }"
27
    @scroll="e => scrollTop = e.target.scrollTop"
28
  >
29
    <div :style="{ height: items.length * itemHeight + 'px' }">
30
      <div
31
        v-for="item in visibleItems"
32
        :key="item.id"
33
        :style="{
34
          height: itemHeight + 'px',
35
          transform: `translateY(${item.index * itemHeight}px)`,
36
          position: 'absolute'
37
        }"
38
      >
39
        {{ item.text }}
40
      </div>
41
    </div>
42
  </div>
43
</template>

1
// 定义 Props 类型
2
interface Props {
3
  title: string;
4
  count?: number;
5
  items: string[];
6
}
7

8
// 使用 defineProps 宏
9
const props = withDefaults(defineProps<Props>(), {
10
  count: 0
11
});
12

13
// 定义 Emits
14
interface Emits {
15
  (e: 'update', value: string): void;
16
  (e: 'delete', id: number): void;
17
}
18

19
const emit = defineEmits<Emits>();

1
<script setup lang="ts" generic="T extends { id: number }">
2
const props = defineProps<{
3
  items: T[];
4
  selectedId?: number;
5
}>();
6
</script>