面试题：Vue中如何利用Vue Composition API进行简单的性能优化

使用 computed 缓存计算值
- 方法：在处理一些依赖于其他响应式数据的计算结果时，使用 computed 函数。例如，假设有一个包含大量商品数据的列表，需要根据商品价格计算总价格。
```
import { ref, computed } from 'vue';

const products = ref([
    { name: 'Product 1', price: 10 },
    { name: 'Product 2', price: 20 }
    // 大量商品数据
]);

const totalPrice = computed(() => {
    return products.value.reduce((acc, product) => acc + product.price, 0);
});
```
- 原理：computed 会缓存计算结果，只有当它依赖的响应式数据（这里是 products）发生变化时，才会重新计算。如果没有使用 computed，每次访问总价格的计算结果时都需要重新遍历所有商品数据进行计算，在数据量较大时性能消耗大。而 computed 缓存机制避免了不必要的重复计算，提升了性能。
使用 watchEffect 进行副作用处理优化
- 方法：对于一些需要响应数据变化执行副作用操作（如网络请求、DOM 操作等），合理使用 watchEffect。比如在商品列表数据变化时，根据当前商品数量发送不同的网络请求。
```
import { ref, watchEffect } from 'vue';

const productCount = ref(0);

watchEffect(() => {
    if (productCount.value > 10) {
        // 发送获取更多商品数据的网络请求
        console.log('Fetching more products...');
    }
});
```
- 原理：watchEffect 会自动跟踪其内部依赖的响应式数据（这里是 productCount）。它只会在依赖的数据变化时才执行回调函数中的副作用操作，避免了不必要的频繁操作。相比手动设置监听器并管理依赖关系，watchEffect 简洁且能更高效地处理副作用，从而提升性能。
合理使用 ref 和 reactive 优化数据响应式
- 方法：对于基本数据类型，使用 ref。对于复杂对象和数组，使用 reactive。例如在处理大量用户数据时，将用户列表用 reactive 定义。
```
import { reactive } from 'vue';

const users = reactive([
    { name: 'User 1', age: 20 },
    { name: 'User 2', age: 25 }
    // 大量用户数据
]);
```
- 原理：ref 用于基本数据类型的响应式包装，它通过 Object.defineProperty 或 Proxy 实现数据劫持，对于基本类型能有效监听变化。reactive 基于 Proxy 实现，对于复杂对象和数组，Proxy 能够更高效地拦截和监听对象属性的访问、赋值等操作，相比 Object.defineProperty 对于数组和对象深层次的监听更高效，在处理大量复杂数据结构时能减少性能开销。

星途面试题库

面试题：Vue中如何利用Vue Composition API进行简单的性能优化

知识考点

面试题答案