了不起的Vue3（下）：深入探索Vue3的新特性与最佳实践

（续上文）
二、Composition API详解
Vue3引入了Composition API，它提供了一种更灵活、可复用的方式来组织组件逻辑。通过组合逻辑函数，我们可以更好地分离关注点，提高代码的可读性和可维护性。
1. ref和reactive
ref和reactive是Composition API中的两个核心函数，用于创建响应式数据。它们类似于Vue2中的this关键字，但提供了更细粒度的控制。

• ref用于包装原始值，如数字、字符串或布尔值。当这些值发生变化时，视图会自动更新。
• reactive则用于对象和数组。当对象或数组发生变化时，视图也会自动更新。
  示例：

  import { ref, reactive } from 'vue';
  export default {
  setup() {
  const count = ref(0);
  const state = reactive({ name: 'Vue3' });
  return {
  count,
  state
  };
  }
  };

  2. computed和watch
  在Vue3中，计算属性和侦听器也得到了改进。使用computed函数可以创建计算属性，它依赖于其他响应式数据，并返回一个值。而watch函数则用于侦听一个响应式数据的变化，并在变化时执行某个操作。
  示例：

  import { computed, watch } from 'vue';
  export default {
  setup() {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);
  watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`);
  });
  return {
  count,
  doubleCount
  };
  }
  };

  3. setup函数
  在Vue3中，组件选项API（如data、methods等）被移至一个新的setup函数中。这个函数返回一个对象，该对象的属性将作为组件的响应式状态。除了状态外，你还可以在这个函数中定义生命周期钩子、侦听器等。这使得组件逻辑更加清晰和模块化。
  示例：

  import { ref } from 'vue';
  export default {
  setup() {
  const count = ref(0);
  function increment() {
  count.value++;
  }
  return {
  count,
  increment
  };
  }
  };

  三、Composition API与Class的对比
  在Vue3之前，很多开发者使用Class语法来编写Vue组件。然而，Class语法在处理逻辑和状态管理方面并不如Composition API灵活。下面我们通过对比来看看两者的优劣：
• 代码可读性：Class语法使用ES6的类定义方式，对于熟悉类概念的开发者来说更容易理解。而Composition API则是一个全新的概念，需要一定的学习成本。但从长期来看，Composition API通过函数组合的方式使代码更加模块化，更易于阅读和维护。
• 状态管理：在Class语法中，我们通常在组件的data选项中定义状态，并在方法中修改状态。这使得状态管理变得复杂且容易出错。而Composition API通过ref和reactive函数创建响应式数据，使得状态管理更加直观和简单。