Computed计算属性——你不容错过的Vue.js基础

前端

2023-09-11 21:45:41

让数据翩翩起舞：深入浅出探寻 Vue.js 中的计算属性

简介

Vue.js 是一个强大的前端 JavaScript 框架，它以其响应式数据和强大的计算属性而闻名。计算属性是让数据“舞动起来”的关键，赋予它们生命力，让它们根据其他数据的变化而自动更新。

计算属性的秘密：从初始化到访问

当我们定义一个计算属性时，Vue.js 会创建一名默默无闻的守护者——“Watcher”——来监视与该属性相关联的实例变量。当这些变量变动时，“Watcher” 会迅速向 Vue.js 报告，触发重新计算的过程。

访问一个计算属性时，Vue.js 会执行以下步骤：

检查缓存： Vue.js 会先检查计算结果是否已经存在。如果存在，则直接返回，无需重新计算。
调用计算函数（“Getter”）： 如果结果不存在，Vue.js 会召唤计算属性的“Getter”函数。这个函数像一位魔法师，将实例变量转化为计算结果。
缓存结果： 计算结果会被缓存起来，以便下次直接返回，无需重复计算。

更新计算属性：数据变动的优雅回应

当与计算属性相关联的实例变量发生变化时，“Watcher” 会迅速采取行动：

触发设置函数（“Setter”）： “Watcher” 会触发计算属性的“Setter”函数，将新的计算结果存储起来。
更新虚拟 DOM： “Watcher” 会通知 Vue.js，更新与该计算属性相关的虚拟 DOM。
渲染更新： Vue.js 会将更新后的虚拟 DOM 渲染到真实 DOM 上，使计算属性的变化在页面上得以体现。

计算属性的魔力：简化、优化、提升响应

计算属性在 Vue.js 开发中至关重要，它们能带来诸多优势：

避免重复计算： 当需要多次使用同一计算结果时，计算属性可以节省大量计算时间，提升性能。
简化模板代码： 通过将复杂的计算逻辑移出模板，计算属性可以使模板代码更简洁易懂。
提高响应速度： 计算属性能快速响应实例变量的变化，并立即更新相关数据，增强应用程序的灵敏性和响应性。

代码示例

下面是一个计算属性的示例，用于计算购物车中所有商品的总价：

const app = new Vue({
  data() {
    return {
      items: [
        { price: 10 },
        { price: 20 },
        { price: 30 },
      ],
    };
  },
  computed: {
    totalPrice() {
      let total = 0;
      for (const item of this.items) {
        total += item.price;
      }
      return total;
    },
  },
});