Vue3.0 新型状态管理与逻辑复用的实战指南

2023-09-23 16:49:57

在 Vue 应用程序中，状态管理和逻辑复用一直是开发人员面临的挑战。随着 Vue3.0 的推出，它引入了一种全新的基于组合的范式，提供了更灵活和高效的解决方案。

Vue3.0 中的响应式状态管理

Vue3.0 引入了新的响应式系统，它通过使用 ref API 和 reactive 函数简化了响应式状态的管理。ref 创建一个可变的响应式引用，而 reactive 将普通 JavaScript 对象转换为响应式代理。通过使用这些 API，您可以轻松地创建响应式状态，并在其更改时触发视图更新。

组合函数：逻辑复用

Vue3.0 受 React 的 hooks 启发，引入了组合函数的概念。组合函数是纯函数，它们接受 props 并返回一个包含状态、逻辑和副作用的对象。通过使用组合函数，您可以将相关联的逻辑提取到一个可重用模块中，从而促进代码复用和模块化。

将两者结合：实战案例

为了展示 Vue3.0 中的新型状态管理和逻辑复用如何工作，让我们创建一个简单的计数器应用程序：

<template>
  <div>
    <button @click="increment">+</button>
    <span>{{ count }}</span>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { useCounter } from './useCounter.js';

export default {
  setup() {
    // 状态管理
    const count = ref(0);

    // 逻辑复用
    const { increment } = useCounter(count);

    return {
      count,
      increment,
    };
  },
};
</script>

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

export function useCounter(count) {
  const increment = () => count.value++;
  return { increment };
}