Vue2 中组合 API 的使用方法

在 Vue2 的开发中，组合 API 为开发者带来了更高效、更灵活的代码组织方式。了解并掌握其使用方法，能显著提升开发效率与代码质量。

要在 Vue2 项目中使用组合 API，需借助 @vueuse/core 等工具库。通过引入这些库，我们就能在 Vue2 的项目里享受到组合 API 的诸多优势。

在数据响应式方面，组合 API 提供了 ref 和 reactive 两个重要函数。ref 用于创建一个响应式的基本数据类型或对象。例如：const count = ref(0)，这样就创建了一个初始值为 0 的响应式变量。在模板中可以直接使用 {{ count }} 来显示其值，当 count 的值发生变化时，模板会自动更新。reactive 则用于创建一个深层次响应式的对象。如 const person = reactive({ name: 'John', age: 30 })，可以通过 person.name 和 person.age 来访问和修改对象属性，且修改会实时反映在视图上。

计算属性与监听器在组合 API 里也有新的实现方式。计算属性使用 computed 函数，例如 const doubleCount = computed(() => count.value * 2)，这里 doubleCount 就是一个计算属性，它依赖于 count 的值，当 count 变化时，doubleCount 会自动重新计算。监听器则使用 watch 函数，watch(count, (newValue, oldValue) => { console.log('Count changed from', oldValue, 'to', newValue) })，这样当 count 的值发生变化时，回调函数就会被触发。

组合 API 还能将相关逻辑封装成可复用的函数。比如创建一个用于处理用户登录逻辑的函数，将登录相关的状态和方法都封装在里面，在不同的组件中都可以引入并使用这个函数，极大地提高了代码的复用性。

在生命周期钩子函数的使用上，组合 API 提供了与 Vue3 类似的方式。例如 onMounted(() => { console.log('Component mounted') })，可以在组件挂载后执行相应的逻辑。

Vue2 中组合 API 的使用，让代码结构更清晰，逻辑复用性更高。通过合理运用这些方法，开发者能够更轻松地构建大型、复杂的 Vue 应用。