面试题：如何优化Vue插值表达式与指令的性能

计算属性优化插值表达式

原理：计算属性会基于它的依赖进行缓存，只有当它的依赖值发生改变时才会重新计算。相比普通的插值表达式，每次数据变化时都重新渲染，计算属性可以减少不必要的计算。
实际场景应用举例：假设在一个电商商品列表页面，每个商品都有价格和数量，需要展示总价。如果使用插值表达式：

<div v - for="product in products">
  总价: {{ product.price * product.quantity }}
</div>

这样每次products数组中的任何一个product对象的price或quantity属性变化时，所有商品的总价插值表达式都会重新计算。

使用计算属性优化：

<template>
  <div v - for="product in products">
    总价: {{ getTotalPrice(product) }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { price: 10, quantity: 2 },
        { price: 15, quantity: 3 }
      ]
    };
  },
  computed: {
    getTotalPrice(product) {
      return product.price * product.quantity;
    }
  }
};
</script>

这样只有当具体某个product的price或quantity变化时，对应的计算属性才会重新计算。

缓存优化插值表达式

原理：手动缓存一些频繁使用且计算量较大的结果，避免重复计算。可以使用一个对象来存储已经计算过的值，下次使用时先检查缓存中是否存在。
实际场景应用举例：假设有一个复杂的文本格式化函数，用于将数字格式化为带有千位分隔符等特定格式的字符串。

<template>
  <div v - for="number in numbers">
    格式化后: {{ formatNumber(number) }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [1000000, 2000000, 1000000]
    };
  },
  methods: {
    formatNumberCache: {},
    formatNumber(number) {
      if (!this.formatNumberCache[number]) {
        // 复杂的格式化逻辑
        this.formatNumberCache[number] = number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }
      return this.formatNumberCache[number];
    }
  }
};
</script>

这里通过formatNumberCache对象缓存已经格式化过的数字，减少了重复计算。

合理使用v - if优化指令性能

原理：v - if是惰性的，当条件为假时，其所在的元素及其子元素不会被渲染，直到条件变为真时才会渲染。适用于在初始渲染时某些元素不需要显示，且切换频率较低的场景。
实际场景应用举例：在一个用户登录页面，有一个“忘记密码”按钮，点击后显示密码找回表单。

<template>
  <div>
    <button @click="showForgotPassword = true">忘记密码</button>
    <form v - if="showForgotPassword">
      <!-- 密码找回表单内容 -->
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showForgotPassword: false
    };
  }
};
</script>

初始渲染时，密码找回表单不会被渲染，只有点击按钮后条件为真才渲染，节省了初始渲染的性能。

合理使用v - show优化指令性能

原理：v - show不管初始条件是什么，元素总是会被渲染，只是通过CSS的display属性来控制显示或隐藏。适用于元素需要频繁切换显示状态的场景，因为切换display属性的性能开销比重新渲染元素要小。
实际场景应用举例：在一个导航栏，有一个“展开/收起”按钮，控制导航栏的展开和收起状态。

<template>
  <div>
    <button @click="isCollapsed =!isCollapsed">展开/收起</button>
    <ul v - show="!isCollapsed">
      <!-- 导航栏菜单项 -->
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: true
    };
  }
};
</script>

这里导航栏通过v - show频繁切换显示状态，由于元素始终存在，只是display属性变化，性能较好。

星途面试题库

面试题：如何优化Vue插值表达式与指令的性能

知识考点

面试题答案

计算属性优化插值表达式

缓存优化插值表达式

合理使用v - if优化指令性能

合理使用v - show优化指令性能