MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue计算属性与侦听器 常见问题与解决方案分享

2024-02-111.2k 阅读

一、Vue 计算属性的基本概念与原理

Vue 计算属性是 Vue.js 提供的一种非常有用的特性，它允许我们基于响应式数据进行复杂的逻辑计算，并将计算结果缓存起来。当依赖的数据发生变化时，计算属性会重新计算，否则会直接返回缓存的结果。

从本质上来说，计算属性是基于 Vue 的响应式系统实现的。Vue 在初始化组件时，会对计算属性进行依赖收集。当计算属性依赖的响应式数据发生变化时，Vue 会通知相关的计算属性重新计算。

1.1 计算属性的定义与使用

在 Vue 组件中，我们通过 computed 选项来定义计算属性。例如：

<template>
  <div>
    <p>First Name: <input v-model="firstName"></p>
    <p>Last Name: <input v-model="lastName"></p>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

在上述代码中，fullName 是一个计算属性，它依赖于 firstName 和 lastName。当 firstName 或 lastName 发生变化时，fullName 会重新计算。

1.2 计算属性的缓存机制

计算属性的缓存机制是其重要特性之一。假设我们有一个非常复杂的计算逻辑，例如计算斐波那契数列：

<template>
  <div>
    <p>Number: <input v-model.number="number"></p>
    <p>Fibonacci: {{ fibonacci }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    };
  },
  computed: {
    fibonacci() {
      let a = 0, b = 1;
      for (let i = 0; i < this.number; i++) {
        let temp = a;
        a = b;
        b = temp + b;
      }
      return a;
    }
  }
};
</script>

如果没有缓存机制，每次 number 发生变化时，都需要重新执行这个复杂的计算逻辑。而有了缓存机制，只有当 number 变化时，fibonacci 才会重新计算，其他时候会直接返回缓存的结果，提高了性能。

二、Vue 计算属性常见问题与解决方案

2.1 计算属性依赖不更新导致结果不准确

有时候，我们可能会遇到计算属性依赖的数据已经发生了变化，但计算属性却没有重新计算，导致结果不准确的情况。 问题场景： 假设有一个 Vue 组件，用于展示购物车中商品的总价。商品列表存储在一个数组中，每个商品对象包含 price 和 quantity 字段。我们通过计算属性 totalPrice 来计算总价。

<template>
  <div>
    <ul>
      <li v-for="(product, index) in products" :key="index">
        <p>Price: {{ product.price }}</p>
        <p>Quantity: {{ product.quantity }}</p>
        <button @click="increaseQuantity(index)">Increase Quantity</button>
      </li>
      <p>Total Price: {{ totalPrice }}</p>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { price: 10, quantity: 1 },
        { price: 20, quantity: 1 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.products.reduce((acc, product) => {
        return acc + product.price * product.quantity;
      }, 0);
    }
  },
  methods: {
    increaseQuantity(index) {
      this.products[index].quantity++;
    }
  }
};
</script>

在上述代码中，当点击 Increase Quantity 按钮时，products 数组中的 quantity 确实增加了，但 totalPrice 并没有重新计算。

原因分析： Vue 的响应式系统是通过 Object.defineProperty() 来实现的。当我们直接修改数组元素中的属性（如 this.products[index].quantity++）时，Vue 无法检测到这个变化，因为它没有触发数组的变异方法。

解决方案： 我们可以使用 Vue 提供的数组变异方法来修改数据，例如 Vue.set() 或 this.$set()。修改后的代码如下：

<template>
  <div>
    <ul>
      <li v-for="(product, index) in products" :key="index">
        <p>Price: {{ product.price }}</p>
        <p>Quantity: {{ product.quantity }}</p>
        <button @click="increaseQuantity(index)">Increase Quantity</button>
      </li>
      <p>Total Price: {{ totalPrice }}</p>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      products: [
        { price: 10, quantity: 1 },
        { price: 20, quantity: 1 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.products.reduce((acc, product) => {
        return acc + product.price * product.quantity;
      }, 0);
    }
  },
  methods: {
    increaseQuantity(index) {
      // 使用 Vue.set 或 this.$set
      this.$set(this.products[index], 'quantity', this.products[index].quantity + 1);
    }
  }
};
</script>

这样，当点击按钮时，totalPrice 会重新计算，显示正确的总价。

2.2 计算属性与方法的混淆

很多初学者容易混淆计算属性和方法，不清楚在什么情况下应该使用计算属性，什么情况下应该使用方法。 问题场景： 在一个展示博客文章列表的组件中，我们需要根据文章的发布时间对文章进行排序。我们可以用计算属性或者方法来实现。

<template>
  <div>
    <ul>
      <li v-for="post in sortedPosts" :key="post.id">
        <p>{{ post.title }}</p>
        <p>{{ post.publishedAt }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        { id: 1, title: 'Post 1', publishedAt: '2023 - 01 - 01' },
        { id: 2, title: 'Post 2', publishedAt: '2023 - 01 - 02' },
        { id: 3, title: 'Post 3', publishedAt: '2023 - 01 - 03' }
      ]
    };
  },
  // 使用计算属性
  computed: {
    sortedPosts() {
      return this.posts.slice().sort((a, b) => {
        return new Date(a.publishedAt) - new Date(b.publishedAt);
      });
    }
  },
  // 使用方法
  methods: {
    getSortedPosts() {
      return this.posts.slice().sort((a, b) => {
        return new Date(a.publishedAt) - new Date(b.publishedAt);
      });
    }
  }
};
</script>

在模板中，我们可以使用 {{ sortedPosts }} 或者 {{ getSortedPosts() }} 来显示排序后的文章列表。

原因分析： 计算属性是基于其依赖进行缓存的，只有当依赖的数据发生变化时才会重新计算。而方法每次调用都会执行其中的逻辑。如果我们在模板中频繁调用方法，会导致不必要的性能开销，因为每次重新渲染都需要重新执行方法。

解决方案： 如果数据是基于响应式数据进行的计算，并且希望缓存计算结果，以提高性能，那么应该使用计算属性。如果计算逻辑不依赖于响应式数据，或者不需要缓存结果，那么可以使用方法。例如，在上述场景中，由于 posts 是响应式数据，并且我们希望缓存排序后的结果，使用计算属性更为合适。

2.3 计算属性的嵌套与性能问题

当计算属性之间存在嵌套关系，并且依赖的响应式数据较多时，可能会出现性能问题。 问题场景： 假设有一个复杂的电商系统，需要计算购物车中商品的总价格，同时还需要根据总价格计算折扣后的价格，以及根据折扣后的价格计算最终需要支付的价格（包含运费）。

<template>
  <div>
    <p>Total Price: {{ totalPrice }}</p>
    <p>Discounted Price: {{ discountedPrice }}</p>
    <p>Final Price: {{ finalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { price: 10, quantity: 1 },
        { price: 20, quantity: 1 }
      ],
      discountRate: 0.9,
      shippingFee: 5
    };
  },
  computed: {
    totalPrice() {
      return this.products.reduce((acc, product) => {
        return acc + product.price * product.quantity;
      }, 0);
    },
    discountedPrice() {
      return this.totalPrice * this.discountRate;
    },
    finalPrice() {
      return this.discountedPrice + this.shippingFee;
    }
  }
};
</script>

在上述代码中，finalPrice 依赖于 discountedPrice，discountedPrice 又依赖于 totalPrice，形成了多层嵌套。

原因分析： 多层嵌套的计算属性会增加依赖收集和重新计算的复杂度。当 products、discountRate 或 shippingFee 中的任何一个发生变化时，都可能导致多层计算属性重新计算，从而影响性能。

解决方案： 尽量简化计算属性的嵌套结构。如果可能，可以将复杂的计算逻辑拆分成多个简单的计算属性或者方法。例如，我们可以将 finalPrice 的计算逻辑稍微修改一下：

<template>
  <div>
    <p>Total Price: {{ totalPrice }}</p>
    <p>Discounted Price: {{ discountedPrice }}</p>
    <p>Final Price: {{ getFinalPrice() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { price: 10, quantity: 1 },
        { price: 20, quantity: 1 }
      ],
      discountRate: 0.9,
      shippingFee: 5
    };
  },
  computed: {
    totalPrice() {
      return this.products.reduce((acc, product) => {
        return acc + product.price * product.quantity;
      }, 0);
    },
    discountedPrice() {
      return this.totalPrice * this.discountRate;
    }
  },
  methods: {
    getFinalPrice() {
      return this.discountedPrice + this.shippingFee;
    }
  }
};
</script>

这样，getFinalPrice 方法不会缓存结果，但只有在真正需要显示最终价格时才会计算，避免了不必要的重新计算。

三、Vue 侦听器的基本概念与原理

Vue 侦听器（watchers）允许我们监听响应式数据的变化，并在数据变化时执行相应的操作。与计算属性不同，侦听器更侧重于在数据变化时执行副作用操作，例如异步请求、修改 DOM 等。

Vue 的侦听器也是基于响应式系统实现的。当我们定义一个侦听器时，Vue 会在组件初始化时对目标数据进行依赖收集。当目标数据发生变化时，会触发侦听器的回调函数。

3.1 侦听器的定义与使用

在 Vue 组件中，我们通过 watch 选项来定义侦听器。例如：

<template>
  <div>
    <p>Search Keyword: <input v-model="searchKeyword"></p>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    };
  },
  watch: {
    searchKeyword(newValue, oldValue) {
      this.filteredItems = this.items.filter(item => {
        return item.name.includes(newValue);
      });
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.name.includes(this.searchKeyword);
      });
    }
  }
};
</script>

在上述代码中，我们定义了一个 searchKeyword 的侦听器。当 searchKeyword 发生变化时，会根据新的关键字过滤 items 数组。同时，我们也用计算属性实现了相同的功能，以作对比。

3.2 深度侦听与 immediate 选项

有时候，我们需要侦听对象内部属性的变化，这就需要用到深度侦听。另外，immediate 选项可以让侦听器在组件初始化时就立即执行一次。 深度侦听：

<template>
  <div>
    <p>User Name: <input v-model="user.name"></p>
    <p>User Age: <input v-model.number="user.age"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        age: 0
      }
    };
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log('User data changed:', newValue);
      },
      deep: true
    }
  }
};
</script>

在上述代码中，通过设置 deep: true，我们可以侦听到 user 对象内部 name 或 age 属性的变化。

immediate 选项：

<template>
  <div>
    <p>Initial Value: <input v-model.number="initialValue"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      initialValue: 0
    };
  },
  watch: {
    initialValue: {
      handler(newValue, oldValue) {
        console.log('Value changed:', newValue);
      },
      immediate: true
    }
  }
};
</script>

在上述代码中，由于设置了 immediate: true，当组件初始化时，handler 函数就会立即执行一次。

四、Vue 侦听器常见问题与解决方案

4.1 深度侦听导致性能问题

深度侦听虽然可以监听到对象内部属性的变化，但它会对对象的所有属性进行递归遍历，这可能会导致性能问题，尤其是在对象比较复杂的情况下。 问题场景： 假设有一个展示用户详细信息的组件，用户信息包含一个复杂的对象，其中包含多个嵌套的对象和数组。

<template>
  <div>
    <!-- 展示用户详细信息的表单 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        basic: {
          name: '',
          age: 0
        },
        address: {
          city: '',
          street: ''
        },
        hobbies: []
      }
    };
  },
  watch: {
    userInfo: {
      handler(newValue, oldValue) {
        // 执行一些操作，比如保存到本地存储
        console.log('User info changed:', newValue);
      },
      deep: true
    }
  }
};
</script>

在上述代码中，由于对 userInfo 进行深度侦听，当 userInfo 内部任何一个属性发生变化时，都会触发 handler 函数，这可能会导致性能开销较大。

原因分析： 深度侦听需要对对象的所有层级进行递归遍历，建立依赖关系。当对象结构复杂时，这种递归遍历会消耗大量的性能。

解决方案： 如果可能，尽量避免对整个复杂对象进行深度侦听。可以选择对具体需要监听的属性进行单独侦听。例如：

<template>
  <div>
    <!-- 展示用户详细信息的表单 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        basic: {
          name: '',
          age: 0
        },
        address: {
          city: '',
          street: ''
        },
        hobbies: []
      }
    };
  },
  watch: {
    'userInfo.basic.name'(newValue, oldValue) {
      console.log('User name changed:', newValue);
    },
    'userInfo.basic.age'(newValue, oldValue) {
      console.log('User age changed:', newValue);
    },
    // 对其他需要监听的属性类似处理
  }
};
</script>

这样，只对特定属性进行侦听，减少了不必要的性能开销。

4.2 侦听器与计算属性的选择困惑

很多开发者在选择使用侦听器还是计算属性时会感到困惑，不清楚在什么场景下应该使用哪一个。 问题场景： 在一个实时搜索的场景中，我们需要根据用户输入的关键字过滤列表数据，并在数据变化时执行一些额外的操作，比如记录搜索历史。

<template>
  <div>
    <p>Search Keyword: <input v-model="searchKeyword"></p>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ],
      searchHistory: []
    };
  },
  // 使用计算属性过滤数据
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.name.includes(this.searchKeyword);
      });
    }
  },
  // 使用侦听器记录搜索历史
  watch: {
    searchKeyword(newValue, oldValue) {
      this.searchHistory.push(newValue);
      console.log('Search history updated:', this.searchHistory);
    }
  }
};
</script>

在上述代码中，我们既使用了计算属性来过滤数据，又使用了侦听器来记录搜索历史。

原因分析： 计算属性主要用于基于响应式数据进行的纯粹计算，并缓存结果。而侦听器更适合在数据变化时执行副作用操作，如异步请求、修改 DOM、记录日志等。

解决方案： 如果只是需要根据响应式数据进行计算并展示结果，优先使用计算属性。如果在数据变化时需要执行一些额外的副作用操作，如上述场景中的记录搜索历史，那么使用侦听器。在实际开发中，往往会结合使用计算属性和侦听器，以实现复杂的业务逻辑。

4.3 异步操作在侦听器中的问题

当在侦听器中执行异步操作时，可能会遇到一些问题，比如数据更新不及时、多次触发等。 问题场景： 假设有一个根据用户输入的城市名称获取天气信息的组件。当用户输入城市名称后，通过异步 API 获取天气数据并显示。

<template>
  <div>
    <p>City: <input v-model="city"></p>
    <p v-if="weather">Weather in {{ city }}: {{ weather }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: '',
      weather: null
    };
  },
  watch: {
    city: {
      async handler(newValue, oldValue) {
        try {
          const response = await fetch(`https://api.example.com/weather?city=${newValue}`);
          const data = await response.json();
          this.weather = data.weather;
        } catch (error) {
          console.error('Error fetching weather data:', error);
        }
      },
      immediate: true
    }
  }
};
</script>

在上述代码中，当 city 发生变化时，会异步获取天气数据。但如果用户快速输入多个城市名称，可能会导致多次请求，并且可能出现数据更新不及时的情况。

原因分析： 异步操作本身是基于事件循环的，当用户快速触发多次数据变化时，多个异步请求可能同时在进行，并且由于事件循环的特性，数据更新可能不会立即反映在视图上。

解决方案： 可以使用防抖（Debounce）或节流（Throttle）技术来解决这个问题。例如，使用防抖：

<template>
  <div>
    <p>City: <input v-model="city"></p>
    <p v-if="weather">Weather in {{ city }}: {{ weather }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: '',
      weather: null,
      debounceTimer: null
    };
  },
  watch: {
    city: {
      handler(newValue, oldValue) {
        if (this.debounceTimer) {
          clearTimeout(this.debounceTimer);
        }
        this.debounceTimer = setTimeout(async () => {
          try {
            const response = await fetch(`https://api.example.com/weather?city=${newValue}`);
            const data = await response.json();
            this.weather = data.weather;
          } catch (error) {
            console.error('Error fetching weather data:', error);
          }
        }, 300);
      },
      immediate: true
    }
  }
};
</script>

在上述代码中，通过防抖技术，当用户输入时，会延迟 300 毫秒再发起请求，避免了频繁请求的问题。

通过对 Vue 计算属性和侦听器常见问题的分析与解决方案的探讨，希望能帮助开发者更好地运用这两个强大的特性，提升 Vue 应用的开发效率和性能。在实际开发中，需要根据具体的业务场景和需求，合理选择和使用计算属性与侦听器，以实现高效、稳定的前端应用。