跳到主要内容

6

1. 前言

本节介绍计算属性的使用方法。包括什么是计算属性,计算属性的特点,还有计算属性和方法在实际使用中的区别。其中重点掌握计算属性和方法的区别,了解它之后,才能在日常工作中灵活使用计算属性和方法。

2. 慕课解释

计算属性,就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的 DOM 部分也会同步自动更新。— 官方定义

计算属性实际上是一个方法,它可以完成各种复杂的逻辑,包括运算、函数调用等,并最终返回一个值。之前的章节中介绍了模版插值的语法,我们知道模板内的可以使用表达式进行计算,例如:{{ count * number }}。但有时候我们的计算逻辑并非如此简单,当模板中放入太多的复杂逻辑会让模板过于繁琐且难以维护。计算属性 computed 的使用可以解决此类问题。 computed 在项目中会大量使用,在使用时需要注意的是 computed 必须有一个返回值。使用 computed 并不难,难点在于如何编写其内部的复杂逻辑。

3. 写一个计算属性

前面介绍了什么是计算属性,那么怎么去定义一个计算属性呢?让我们先来看一段代码: