Vue.js 计算属性

在 Vue.js 中，计算属性是一种可响应的属性，通过计算属性，我们可以实现对其他属性的值的处理和返回新的值，从而简化模板中的逻辑，代码也更加可读。本文将介绍 Vue.js 计算属性的使用方法和注意事项。

基本使用

计算属性是在 Vue 实例中定义的一个函数，返回值会被缓存，只有当依赖的响应式属性发生改变时才会重新计算。

// 定义计算属性
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}
// 在模板中使用计算属性
<p>{{ fullName }}</p>

计算属性 vs 方法

与方法相比，计算属性更加高效。因为计算属性是响应式的，数据变化时会自动更新值，而方法每次都会重新执行。

// 定义计算属性
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
},
// 定义方法
methods: {
  getFullName() {
    return this.firstName + ' ' + this.lastName
  }
}

在模板中使用：

<p>{{ fullName }}</p>
<p>{{ getFullName() }}</p>

当 firstName 或 lastName 发生改变时，只有计算属性会被重新计算。

计算属性 vs 侦听器

计算属性可以用来处理多个相关响应式属性，并将它们封装成一个属性。而侦听器则适用于观察某个数据的变化，并在发生变化时执行相应的操作。

// 计算属性
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
},
// 侦听器
watch: {
  firstName(value) {
    this.fullName = value + ' ' + this.lastName
  },
  lastName(value) {
    this.fullName = this.firstName + ' ' + value
  }
}

在模板中使用：

<p>{{ fullName }}</p>

计算属性缓存

计算属性具有缓存特性，只有在相关响应式属性发生改变时才会重新计算。也就是说，多次访问同一个计算属性时，计算属性只会被计算一次，之后会直接从缓存中取值。

// 定义计算属性
computed: {
  fullName() {
    console.log('compute fullName')
    return this.firstName + ' ' + this.lastName
  }
}

在模板中使用：

<!-- 计算属性只会被计算一次 -->
<p>{{ fullName }}</p>
<p>{{ fullName }}</p>
<p>{{ fullName }}</p>

控制台输出：

compute fullName

计算属性的 setter

计算属性可以定义 setter 方法，用来监听对计算属性的修改，并将修改后的值保存到响应式属性中。

// 定义计算属性
computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName
    },
    set(value) {
      const names = value.split(' ')
      this.firstName = names[0]
      this.lastName = names[1]
    }
  }
}

在模板中使用：

<!-- 修改计算属性的值 -->
<input v-model="fullName">

总结

• 计算属性是一个可响应的属性，通过计算属性我们可以实现对其他属性的值的处理和返回新的值，从而简化模板中的逻辑，代码也更加可读。
• 计算属性比方法更高效，因为计算属性是响应式的，数据变化时会自动更新值，而方法每次都会重新执行。
• 计算属性可以用来处理多个相关响应式属性，并将它们封装成一个属性。而侦听器则适用于观察某个数据的变化，并在发生变化时执行相应的操作。
• 计算属性具有缓存特性，只有在相关响应式属性发生改变时才会重新计算。也就是说，多次访问同一个计算属性时，计算属性只会被计算一次，之后会直接从缓存中取值。
• 计算属性可以定义 setter 方法，用来监听对计算属性的修改，并将修改后的值保存到响应式属性中。