编辑“︁Vue.js计算属性”︁（章节）

= Vue.js计算属性 =

== 介绍 ==
'''计算属性'''是Vue.js中一个强大的特性，它允许你声明式地定义依赖于其他数据的属性。与普通方法不同，计算属性会缓存其结果，只有在其依赖的数据发生变化时才会重新计算。这使得计算属性非常适合处理复杂逻辑和性能优化场景。

计算属性的主要特点：
* '''响应式'''：当依赖的数据变化时自动更新
* '''高效'''：基于依赖缓存，避免不必要的计算
* '''声明式'''：将复杂逻辑封装为属性而非方法

== 基本语法 ==
计算属性定义在Vue组件的<code>computed</code>选项中：

<syntaxhighlight lang="javascript">
new Vue({
  data: {
    firstName: '张',
    lastName: '三'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
})
</syntaxhighlight>

在此示例中：
* <code>fullName</code>是一个计算属性
* 它依赖于<code>firstName</code>和<code>lastName</code>数据属性
* 当任一依赖变化时，<code>fullName</code>会自动更新

== 计算属性 vs 方法 ==
虽然使用方法也能达到类似效果，但计算属性有显著的性能优势：

<syntaxhighlight lang="javascript">
// 方法实现
methods: {
  getFullName: function() {
    return this.firstName + ' ' + this.lastName
  }
}

// 计算属性实现
computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName
  }
}
</syntaxhighlight>

关键区别：
{| class="wikitable"
|-
! 特性 !! 计算属性 !! 方法
|-
| 缓存 | 是 | 否
|-
| 调用语法 | 作为属性访问 | 需要调用()
|-
| 重新计算时机 | 依赖变化时 | 每次调用时
|}

== 计算属性的Setter ==
计算属性默认只有getter，但也可以提供setter：

<syntaxhighlight lang="javascript">
computed: {
  fullName: {
    // getter
    get: function() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function(newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
</syntaxhighlight>

使用setter时：
* 当执行<code>this.fullName = '李 四'</code>时，setter会被调用
* setter可以分解输入值并更新依赖的数据属性

== 实际应用案例 ==

=== 案例1：购物车总价计算 ===
<syntaxhighlight lang="javascript">
data: {
  cartItems: [
    { name: '商品A', price: 100, quantity: 2 },
    { name: '商品B', price: 200, quantity: 1 }
  ]
},
computed: {
  totalPrice: function() {
    return this.cartItems.reduce(
      (total, item) => total + (item.price * item.quantity), 
      0
    )
  }
}
</syntaxhighlight>

=== 案例2：过滤列表 ===
<syntaxhighlight lang="javascript">
data: {
  searchQuery: '',
  items: [
    { title: 'Vue.js指南' },
    { title: 'React入门' },
    { title: 'Angular教程' }
  ]
},
computed: {
  filteredItems: function() {
    var query = this.searchQuery.toLowerCase()
    return this.items.filter(function(item) {
      return item.title.toLowerCase().indexOf(query) !== -1
    })
  }
}
</syntaxhighlight>

== 性能考虑 ==
计算属性的缓存机制可以显著提升性能，特别是在以下场景：
* 计算成本高的操作（如大型数组处理）
* 频繁访问的属性
* 依赖多个数据的复杂逻辑

<mermaid>
graph LR
    A[原始数据] --> B[计算属性]
    B --> C{依赖变化?}
    C -->|是| D[重新计算]
    C -->|否| E[返回缓存值]
    D --> F[更新缓存]
</mermaid>

== 最佳实践 ==
1. '''保持纯净'''：计算属性应该是纯函数，不产生副作用
2. '''避免直接修改DOM'''：计算属性应该只用于数据计算
3. '''合理拆分'''：复杂的计算可以分解为多个计算属性
4. '''命名清晰'''：使用描述性名称反映计算属性的用途

== 数学公式示例 ==
当计算属性涉及数学运算时，可以使用公式表示：

计算圆的面积：
<math>A = \pi r^2</math>

在Vue中的实现：
<syntaxhighlight lang="javascript">
computed: {
  circleArea: function() {
    return Math.PI * Math.pow(this.radius, 2)
  }
}
</syntaxhighlight>

== 总结 ==
Vue.js计算属性是处理派生数据的强大工具，它：
* 提供声明式的方式来定义依赖其他数据的属性
* 通过缓存机制优化性能
* 使代码更清晰、更易维护
* 适合各种复杂的数据处理场景

掌握计算属性是成为Vue.js开发者的重要一步，它能帮助你写出更高效、更优雅的代码。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js基础]]