vue2中 computed 计算属性

vue2中 computed 计算属性

在 Vue 2 中，computed 计算属性是组件中非常重要的一部分，它允许我们基于现有数据派生出新的数据，并且具有缓存机制，能够提高应用的性能和响应速度。本文将详细介绍 computed 计算属性的用法、特点以及实际应用案例。

1. 什么是计算属性？

计算属性是基于其依赖的响应式数据生成的动态值。它们会根据依赖的数据自动更新，并且具有缓存机制，只有在依赖的数据发生变化时才会重新计算。计算属性在模板中可以像普通数据一样使用，但它们的值是通过函数计算得来的。

2. 基本用法

1. 定义计算属性

计算属性通常定义在 Vue 实例的 computed 选项中。以下是一个简单的例子：

<div id="app">
  <p>原始值：{
   
   {
   
    number }}</p>
  <p>计算属性（平方）：{
   
   {
   
    squaredNumber }}</p>
</div>

<script>
  new Vue({
   
   
    el: '#app',
    data: {
   
   
      number: 5
    },
    computed: {
   
   
      squaredNumber() {
   
   
        return this.number * this.number;
      }
    }
  });
</script>

在这个例子中，squaredNumber 是一个计算属性，它依赖于 number 数据。当 number 发生变化时，squaredNumber 会自动更新。

2. 计算属性的缓存特性

计算属性具有缓存机制，只有在依赖的数据发生变化时才会重新计算。这意味着如果依赖的数据没有变化，多次访问计算属性会返回缓存的值，而不会重新执行计算函数。这在性能上是非常高效的。

<div id="app">
  <p>原始值：{
   
   {
   
    number }}</p>
  <p>计算属性（平方）：{
   
   {
   
    squaredNumber }}</p>
  <button @click="number++">增加</button>
</div>

<script>
  new Vue({
   
   
    el: '#app',
    data: {
   
   
      number: 5
    },
    computed: {
   
   
      squaredNumber() {
   
   
        console.log('计算属性被重新计算');
        return this.number * this.number;
      }
    }
  });
</script>

在这个例子中，每次点击按钮时，number 增加 1，squaredNumber 会重新计算并更新。但是，如果 number 没有变化，多次访问 squaredNumber 不会触发重新计算。

3. 计算属性的高级用法

1. 计算属性的 Getter 和 Setter 方法

计算属性不仅可以定义 getter 方法，还可以定义 setter 方法，实现双向绑定的自定义逻辑。

<div id="app">