Vue 3 新特性与最佳实践之Composition API 和响应式系统

Vue 3 新特性与最佳实践之Composition API 和响应式系统

一、Composition API

Composition API 是 Vue 3 的核心改进之一，提供了一种更灵活的方式来组织组件逻辑。它允许开发者将组件的逻辑拆分为独立的函数，使得代码更易于维护和复用。

（一）核心概念

• setup 函数：Composition API 的核心，用于定义组件的逻辑。
• 响应式状态管理：使用 ref 和 reactive 创建响应式数据。
• 计算属性：使用 computed 创建计算属性。
• 生命周期钩子：Composition API 提供了与选项 API 类似的生命周期钩子。

（二）使用场景

• 逻辑复用：将通用逻辑抽取为可复用的函数。
• 复杂组件：将复杂组件的逻辑拆分为多个部分，提高可读性和可维护性。

（三）代码示例

1. 基本用法

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

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

const increment = () => {
  count.value++;
};
</script>

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

2. 逻辑复用

// 定义可复用逻辑
function useCounter() {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

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

  return { count, doubleCount, increment };
}

// 在组件中使用
<script setup>
import { useCounter } from './composables/useCounter';

const { count, doubleCount, increment } = useCounter();
</script>

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

（四）最佳实践

• 模块化：将逻辑拆分为独立的模块。
• 类型注解：使用 TypeScript 提供类型安全。

二、响应式系统

Vue 3 的响应式系统基于 ES6 的 Proxy 实现，相比 Vue 2 的 Object.defineProperty 更加高效和灵活。

（一）核心概念

• reactive：创建响应式对象。
• ref：创建响应式引用。
• computed：创建计算属性。
• watch：监听响应式数据的变化。

（二）使用场景

• 管理状态：管理组件内部的状态。
• 数据绑定：实现数据与视图的自动同步。
• 异步更新：监听数据变化并执行副作用。

（三）代码示例

1. 使用 reactive

<script setup>
import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue 3'
});

const increment = () => {
  state.count++;
};
</script>

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

2. 使用 ref

<script setup>
import { ref } from 'vue';

const count = ref(0);
const name = ref('Vue 3');

const increment = () => {
  count.value++;
};
</script>

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

3. 使用 computed

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

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

const increment = () => {
  count.value++;
};
</script>

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

4. 使用 watch

<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

const increment = () => {
  count.value++;
};
</script>

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

（四）最佳实践

• 性能优化：避免不必要的响应式操作。
• 调试：使用 Vue DevTools 调试响应式数据。

三、组合使用 Composition API 和响应式系统

（一）创建可复用逻辑

// 定义可复用逻辑
function useCounter() {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

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

  return { count, doubleCount, increment };
}

// 在组件中使用
<script setup>
import { useCounter } from './composables/useCounter';

const { count, doubleCount, increment } = useCounter();
</script>

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

（二）管理复杂状态

<script setup>
import { reactive, computed } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue 3'
});

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

const increment = () => {
  state.count++;
};
</script>

<template>
  <div>
    <h1>{{ state.count }}</h1>
    <p>{{ state.name }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

四、总结

Composition API 和响应式系统是 Vue 3 的核心特性，提供了更灵活、高效的开发体验。通过合理使用这些特性，可以显著提升代码的可维护性和应用性能。