跳到主要内容

Vue.js组合式 API 最佳实践

介绍​

Vue.js 的组合式 API（Composition API）是 Vue 3 引入的一种新的编写组件逻辑的方式。它允许开发者将逻辑组织成可重用的函数，而不是像选项式 API 那样将所有逻辑分散在 data、methods、computed 等选项中。组合式 API 提供了更好的代码组织和复用性，特别适合处理复杂组件的逻辑。

本文将介绍一些使用组合式 API 的最佳实践，帮助初学者更好地理解和应用这一功能。

1. 使用 ref 和 reactive 管理状态​

在组合式 API 中，ref 和 reactive 是两种常用的状态管理工具。

  • ref 用于管理基本类型（如字符串、数字、布尔值）的状态。
  • reactive 用于管理对象或数组等复杂类型的状态。

示例​

javascript
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0); // 使用 ref 管理基本类型
    const user = reactive({ name: 'Alice', age: 25 }); // 使用 reactive 管理对象

    return {
      count,
      user,
    };
  },
};
提示

提示：ref 返回的是一个响应式对象，访问其值时需要使用 .value，而 reactive 返回的对象可以直接访问属性。

2. 使用 computed 创建计算属性​

计算属性是基于响应式状态派生出的值。使用 computed 可以避免在模板中编写复杂的逻辑。

示例​

javascript
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount,
    };
  },
};
备注

注意：计算属性是惰性求值的，只有在依赖的响应式状态发生变化时才会重新计算。

3. 使用 watch 监听状态变化​

watch 用于监听响应式状态的变化，并在变化时执行相应的逻辑。

示例​

javascript
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count 从 ${oldValue} 变为 ${newValue}`);
    });

    return {
      count,
    };
  },
};
警告

注意：watch 默认是惰性的，只有在监听的值发生变化时才会触发回调。如果需要立即执行回调，可以使用 watchEffect。

4. 将逻辑提取到自定义组合函数中​

组合式 API 的一个强大之处在于可以将逻辑提取到自定义函数中，从而实现逻辑的复用。

示例​

javascript
import { ref, onMounted, onUnmounted } from 'vue';

function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));

  return { x, y };
}

export default {
  setup() {
    const { x, y } = useMousePosition();

    return {
      x,
      y,
    };
  },
};
提示

提示：将逻辑提取到自定义组合函数中，可以使代码更加模块化和可维护。

5. 使用 provide 和 inject 实现跨组件通信​

在 Vue 3 中，provide 和 inject 可以用于在组件树中跨层级传递数据。

示例​

javascript
import { provide, inject, ref } from 'vue';

// 父组件
export default {
  setup() {
    const theme = ref('dark');
    provide('theme', theme);

    return {
      theme,
    };
  },
};

// 子组件
export default {
  setup() {
    const theme = inject('theme');

    return {
      theme,
    };
  },
};
备注

注意：provide 和 inject 通常用于跨层级组件之间的通信，避免使用 props 层层传递数据。

6. 使用 onMounted 和 onUnmounted 处理生命周期钩子​

组合式 API 提供了 onMounted 和 onUnmounted 等生命周期钩子函数，用于在组件挂载和卸载时执行相应的逻辑。

示例​

javascript
import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });

    onUnmounted(() => {
      console.log('组件已卸载');
    });
  },
};
警告

注意：生命周期钩子函数只能在 setup 函数中使用。

7. 实际案例：创建一个计数器组件​

让我们通过一个实际的案例来展示如何使用组合式 API 创建一个简单的计数器组件。

示例​

javascript
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    function decrement() {
      count.value--;
    }

    return {
      count,
      increment,
      decrement,
    };
  },
};
html
<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>
提示

提示：这个例子展示了如何使用 ref 管理状态，并在模板中绑定事件处理函数。

总结​

Vue.js 的组合式 API 提供了一种更加灵活和强大的方式来组织组件逻辑。通过使用 ref、reactive、computed、watch 等工具，开发者可以更好地管理状态、处理副作用，并将逻辑提取到可重用的函数中。

希望本文的最佳实践能帮助你更好地理解和应用组合式 API。如果你想要进一步学习，可以参考以下资源：

练习​

  1. 尝试将上述计数器组件扩展为支持重置功能。
  2. 创建一个自定义组合函数 useLocalStorage，用于将状态持久化到 localStorage 中。

祝你学习愉快！