Vue3常见Composition API详解（适用Vue2学习进入Vue3学习）

Vue 3 常用组合式 API 详解

Vue 3 引入的组合式 API（Composition API）为开发者提供了更灵活和高效的状态逻辑组织方式。以下是常用的组合式 API 及其详解：

1. reactive

作用：
将一个普通对象变为响应式对象，适合复杂的嵌套数据结构。

用法：

import { reactive } from 'vue';

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

state.count++;  // 响应式更新
state.user.name = 'Bob';  // 响应式更新

2. ref

作用：
创建一个响应式的基本类型或单一值。

用法：

import { ref } from 'vue';

const count = ref(0);

count.value++;  // 通过 .value 访问或更新值

区别：

• ref 适用于基本类型。
• reactive 适用于对象和复杂结构。

3. computed

作用：
定义计算属性，当依赖的值发生变化时，自动更新。

用法：

import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

count.value++;  // doubleCount 自动更新为 2

4. watch

作用：
监听响应式数据的变化，执行副作用逻辑。

用法：

• 监听单个值：

  import { ref, watch } from 'vue';
  
  const count = ref(0);
  watch(count, (newVal, oldVal) => {
    console.log(`Count changed from ${oldVal} to ${newVal}`);
  });
  count.value++;  // 触发 watch
  

• 监听多个值：

  import { reactive, watch } from 'vue';
  
  const state = reactive({ name: 'Alice', age: 25 });
  watch(() => state.name, (newVal) => {
    console.log(`Name changed to ${newVal}`);
  });
  state.name = 'Bob';  // 触发 watch
  

特点：

• 默认是异步的，可通过 flush: 'sync' 设置为同步。
• 支持清理副作用：

  watch(source, (newVal, oldVal, onCleanup) => {
    const interval = setInterval(() => console.log('Tick'), 1000);
    onCleanup(() => clearInterval(interval));
  });
  

5. watchEffect

作用：
立即运行一个副作用函数，并在依赖变化时重新执行。

用法：

import { ref, watchEffect } from 'vue';

const count = ref(0);
watchEffect(() => {
  console.log(`Count is: ${count.value}`);
});
count.value++;  // 重新执行 watchEffect

特点：

• 自动收集依赖。
• 与 watch 的区别在于 watchEffect 不需要显式声明监听的响应式数据。

6. onMounted / onUnmounted

作用：
在组件生命周期的特定时刻执行逻辑。

用法：

import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});

onUnmounted(() => {
  console.log('Component unmounted');
});

7. onBeforeMount / onBeforeUnmount

作用：

• onBeforeMount: 在组件挂载前触发。
• onBeforeUnmount: 在组件销毁前触发。

用法：

import { onBeforeMount, onBeforeUnmount } from 'vue';

onBeforeMount(() => {
  console.log('Component will mount soon');
});

onBeforeUnmount(() => {
  console.log('Component will unmount soon');
});

8. provide / inject

作用：
实现祖孙组件之间的依赖注入，避免中间组件的冗余传递。

用法：

• 祖先组件：

  import { provide } from 'vue';
  
  provide('message', 'Hello from parent');
  

• 后代组件：

  import { inject } from 'vue';
  
  const message = inject('message');
  console.log(message);  // 输出 'Hello from parent'
  

9. nextTick

作用：
在 DOM 更新完成后执行回调。

用法：

import { ref, nextTick } from 'vue';

const count = ref(0);

count.value++;
nextTick(() => {
  console.log('DOM updated with count:', count.value);
});

10. defineComponent

作用：
用于定义 Vue 组件，支持更好的类型推导。

用法：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    return { count };
  },
});

11. customRef

作用：
创建自定义的响应式 ref，可控制依赖收集和触发逻辑。

用法：

import { customRef } from 'vue';

function debounceRef(value, delay) {
  let timeout;
  return customRef((track, trigger) => ({
    get() {
      track();
      return value;
    },
    set(newValue) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        value = newValue;
        trigger();
      }, delay);
    },
  }));
}

const debouncedValue = debounceRef('', 300);

12. isRef / isReactive / toRefs

作用：

• isRef：检查某个变量是否为 ref。
• isReactive：检查某个对象是否为响应式。
• toRefs：将 reactive 对象的属性转换为 ref。

用法：

import { reactive, toRefs, isRef, isReactive } from 'vue';

const state = reactive({ count: 0 });
const refs = toRefs(state);

console.log(isRef(refs.count));  // true
console.log(isReactive(state));  // true

13. shallowReactive / shallowRef

作用：
创建浅层响应式对象或值，仅对第一层数据响应式。

用法：

import { shallowReactive, shallowRef } from 'vue';

const state = shallowReactive({ nested: { count: 0 } });
state.nested.count = 1;  // 不会触发响应式更新

14. readonly / toRaw

作用：

• readonly：创建不可变的响应式对象。
• toRaw：返回响应式对象的原始对象。

用法：

import { reactive, readonly, toRaw } from 'vue';

const state = reactive({ count: 0 });
const readonlyState = readonly(state);

state.count = 1;  // 可更新
readonlyState.count = 1;  // 报错
console.log(toRaw(readonlyState) === state);  // true

15. unref

作用：
获取 ref 的原始值，无需手动 .value。

用法：

import { ref, unref } from 'vue';

const count = ref(10);
console.log(unref(count));  // 10

总结

Vue 3 的组合式 API 提供了更高的灵活性，适合复杂逻辑的封装和复用，同时改善了类型推导和代码组织方式。在实际开发中，根据需求选择合适的 API，可以显著提升开发效率和代码可维护性。