Vue 3 Composition API最佳实践与性能优化

Vue 3的Composition API为组件逻辑复用和代码组织提供了全新的方式。本文将分享Composition API的最佳实践和性能优化技巧。

Composition API基础

Composition API通过setup函数提供了一种更灵活的方式来组织组件逻辑，特别适合复杂组件的开发。

import { ref, computed, onMounted } from "vue";

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    
    const increment = () => {
      count.value++;
    };
    
    onMounted(() => {
      console.log("组件已挂载");
    });
    
    return {
      count,
      doubleCount,
      increment
    };
  }
};
                    

逻辑复用模式

自定义Composables

通过创建自定义composables，我们可以轻松复用组件逻辑：

// useCounter.js
import { ref } from "vue";

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initialValue;
  
  return {
    count,
    increment,
    decrement,
    reset
  };
}

// 在组件中使用
import { useCounter } from "./composables/useCounter";

export default {
  setup() {
    const { count, increment, decrement } = useCounter(10);
    
    return {
      count,
      increment,
      decrement
    };
  }
};
                    

响应式系统优化

合理使用ref和reactive

选择合适的响应式API对性能至关重要：

// 基本类型使用ref
const count = ref(0);
const message = ref("Hello");

// 对象使用reactive
const state = reactive({
  user: {
    name: "张三",
    age: 25
  },
  settings: {
    theme: "dark"
  }
});

// 大型对象考虑使用shallowReactive
const largeData = shallowReactive({
  items: new Array(10000).fill(0).map((_, i) => ({ id: i }))
});
                    

避免不必要的响应式转换

// 使用markRaw避免深度响应式
const chart = markRaw(new Chart(canvas, config));

// 使用readonly创建只读代理
const readonlyState = readonly(state);
                    

计算属性优化

合理使用计算属性可以避免不必要的计算：

const expensiveValue = computed(() => {
  // 只有依赖项变化时才重新计算
  return heavyCalculation(props.data);
});

// 使用缓存的计算属性
const cachedValue = computed({
  get() {
    return store.getters.expensiveGetter;
  },
  set(value) {
    store.commit("updateValue", value);
  }
});
                    

生命周期钩子最佳实践

import { onMounted, onUnmounted, onUpdated } from "vue";

export default {
  setup() {
    let timer = null;
    
    onMounted(() => {
      timer = setInterval(() => {
        // 定时任务
      }, 1000);
    });
    
    onUnmounted(() => {
      if (timer) {
        clearInterval(timer);
      }
    });
    
    onUpdated(() => {
      // DOM更新后的逻辑
    });
  }
};
                    

TypeScript集成

Vue 3对TypeScript的支持更加完善：

import { defineComponent, ref, PropType } from "vue";

interface User {
  id: number;
  name: string;
  email: string;
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    }
  },
  setup(props) {
    const loading = ref<boolean>(false);
    const users = ref<User[]>([]);
    
    const fetchUsers = async (): Promise<void> => {
      loading.value = true;
      try {
        const response = await api.getUsers();
        users.value = response.data;
      } finally {
        loading.value = false;
      }
    };
    
    return {
      loading,
      users,
      fetchUsers
    };
  }
});
                    

性能监控与调试

使用Vue DevTools和性能API监控应用性能：

import { watchEffect } from "vue";

// 监控响应式数据变化
watchEffect(() => {
  console.log("Count changed:", count.value);
});

// 性能标记
const startTime = performance.now();
// 执行操作
const endTime = performance.now();
console.log(`操作耗时: ${endTime - startTime}ms`);
                    

常见陷阱与解决方案

• 响应式丢失：使用toRefs解构reactive对象
• 内存泄漏：及时清理事件监听器和定时器
• 过度响应式：合理使用shallowRef和shallowReactive
• 计算属性依赖：确保计算属性的依赖项正确

总结

Vue 3的Composition API提供了更强大和灵活的组件开发方式。通过遵循最佳实践，我们可以编写出更易维护、性能更好的Vue应用。关键是要理解响应式系统的工作原理，合理选择API，并注意性能优化。