Vue3常见Composition API详解(适用Vue2学习进入Vue3学习)

Vue 3 常用组合式 API 详解

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


1. reactive

作用

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

用法

javascript 复制代码
import { reactive } from 'vue';

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

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

2. ref

作用

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

用法

javascript 复制代码
import { ref } from 'vue';

const count = ref(0);

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

区别

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

3. computed

作用

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

用法

javascript 复制代码
import { ref, computed } from 'vue';

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

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

4. watch

作用

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

用法

  • 监听单个值:

    javascript 复制代码
    import { ref, watch } from 'vue';
    
    const count = ref(0);
    watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });
    count.value++;  // 触发 watch
  • 监听多个值:

    javascript 复制代码
    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' 设置为同步。

  • 支持清理副作用:

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

5. watchEffect

作用

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

用法

javascript 复制代码
import { ref, watchEffect } from 'vue';

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

特点

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

6. onMounted / onUnmounted

作用

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

用法

javascript 复制代码
import { onMounted, onUnmounted } from 'vue';

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

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

7. onBeforeMount / onBeforeUnmount

作用

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

用法

javascript 复制代码
import { onBeforeMount, onBeforeUnmount } from 'vue';

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

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

8. provide / inject

作用

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

用法

  • 祖先组件

    javascript 复制代码
    import { provide } from 'vue';
    
    provide('message', 'Hello from parent');
  • 后代组件

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

9. nextTick

作用

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

用法

javascript 复制代码
import { ref, nextTick } from 'vue';

const count = ref(0);

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

10. defineComponent

作用

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

用法

javascript 复制代码
import { defineComponent, ref } from 'vue';

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

11. customRef

作用

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

用法

javascript 复制代码
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

用法

javascript 复制代码
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

作用

创建浅层响应式对象或值,仅对第一层数据响应式。

用法

javascript 复制代码
import { shallowReactive, shallowRef } from 'vue';

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

14. readonly / toRaw

作用

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

用法

javascript 复制代码
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

用法

javascript 复制代码
import { ref, unref } from 'vue';

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

总结

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

相关推荐
Mintopia10 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
白日依山尽yy10 分钟前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
Mintopia11 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
陌小路16 分钟前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing1213824 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36533 分钟前
antd 组件部分API使用方法
前端
BillKu36 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL38 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤1 小时前
首个支持A股的AI多智能体金融系统,来了
前端·python