Vue3 Composition API 深度解析：告别Options API的局限性-EW帮帮网

import { ref } from 'vue';

export default {
  setup() {
    // 定义响应式数据
    const count = ref(0);
    
    // 定义方法
    const increment = () => {
      count.value++;
    };

    // 暴露给模板
    return { count, increment };
  }
}

关键点：

setup() 在 beforeCreate 前执行，没有 this
返回对象中的属性会暴露给模板使用
所有Composition API函数都需要在此引入

三、响应式核心：`ref()` 和 `reactive()`

1. `ref` - 处理基本类型/对象

const num = ref(0);       // { value: 0 }
const user = ref({ name: 'Leo' });

console.log(num.value);   // 访问值
num.value = 5;            // 修改值

2. `reactive` - 处理对象

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

state.count = 10;         // 直接修改属性

特性	`ref`	`reactive`
数据类型	任意	对象
模板访问	自动解包	直接访问属性
重新赋值	`.value` 修改	不能直接替换对象

四、生命周期钩子新写法

在setup()中使用生命周期前缀加on：

import { onMounted, onUpdated } from 'vue';

setup() {
  onMounted(() => {
    console.log('组件挂载完成!');
  });
  
  onUpdated(() => {
    console.log('组件更新了!');
  });
}

Vue2选项	Composition API等价
`beforeCreate`	`setup()` 自身
`created`	`setup()` 自身
`mounted`	`onMounted`
`updated`	`onUpdated`

五、强大的逻辑复用：组合式函数

将相同逻辑抽离为可复用函数（替代mixins）：

// useCounter.js
import { ref } from 'vue';

export default function useCounter() {
  const count = ref(0);
  
  const increment = () => count.value++;
  const decrement = () => count.value--;
  
  return { count, increment, decrement };
}

在组件中使用：

import useCounter from './useCounter';

setup() {
  const { count, increment } = useCounter();
  
  return { count, increment };
}

优势：

显式暴露使用的属性和方法
多个组合函数互不冲突
完美支持TypeScript类型推断

六、响应式计算：`computed` & `watch`

1. 计算属性

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

2. 侦听器

// 侦听单个ref
watch(count, (newVal, oldVal) => {
  console.log(`计数变化：${oldVal} → ${newVal}`);
});

// 侦听多个源
watch([count, name], ([newCount, newName]) => {
  // 处理变化
});

七、最佳实践指南

按功能组织代码：将同一功能的ref、computed、watch放在一起

复杂组件使用<script setup>语法糖（SFC专属）：

<script setup>
import { ref } from 'vue';
const count = ref(0); // 自动暴露到模板
</script>

组合函数命名以use开头（如useMouseTracker）

需要DOM时使用ref绑定元素：

<template>
  <div ref="root">元素</div>
</template>

<script>
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const root = ref(null);
    onMounted(() => {
      console.log(root.value); // 获取DOM元素
    });
    return { root };
  }
}
</script>

八、对比Options API

// Options API (Vue2风格)
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ }
  },
  mounted() {
    console.log('mounted');
  }
}

// Composition API (Vue3)
export default {
  setup() {
    const count = ref(0);
    const increment = () => { count.value++ };
    onMounted(() => console.log('mounted'));
    
    return { count, increment };
  }
}

结语

Composition API 赋予了Vue开发者更自由的代码组织能力，尤其适合：

大型项目开发
需要高复用性的场景
TypeScript深度集成

虽然学习曲线稍陡峭，但它带来的可维护性提升绝对值得投入！现在就开始重构你的Vue组件吧！

Vue3 Composition API 深度解析：告别Options API的局限性

一、为什么需要Composition API？

二、核心概念：`setup()` 函数