2.2.1 计算属性的基本使用

在2.1.1节的案例中，通过三目表达式动态判断data中score的值，从而决定显示的文本。这个动态判断的过程可以称为计算。这里将2.1.1节中三目表达式的模板编码单列出来，并对其进行分析。

上面的模板看起来有些复杂，可读性较差。而对于这段代码来说，更重要的是，如果页面中有多处需要同样的计算，这个计算的模板就需要重复编写多遍。

为了解决这一问题，Vue框架专门设计了一个重要语法：计算属性。当模板显示的某个数据需要通过已有数据进行一定的逻辑计算才能确定时，就可以选择用计算属性语法来实现。先来看利用计算属性语法重构后的代码，具体如下。

对比2.1.1节中的代码，可以明显地看出，在重构的代码中多出一个配置对象computed。实际上这就是Vue中计算属性定义的位置，整个代理对象需要的计算属性都需要定义在computed配置对象中。

我们结合上面这段代码来分析，“测评得分”的数据就是在读取data数据，这并没有什么特别的，我们不对其多做讲解。“测评结果”需要根据“测评得分”来显示对应的结果，该结果需要根据score的数据来决定，这满足了计算属性的条件，因此使用了计算属性来实现。这里在computed配置对象中定义了名称为resultText的计算属性，它本质上就是一个函数，内部可以根据已有的data数据进行计算，产生要显示的结果数据并返回它。需要注意的是，计算属性函数中的this就是当前组件对象，通过它可以直接访问data中的数据。在模板中可以读取计算属性函数resultText，当初始化显示时，系统会自动调用这个计算属性函数得到返回值并显示到页面上。

此时，data中score的值为59，因此返回的“测评结果”为“入学测试未通过，暂时不可以来尚硅谷学习”。页面效果如图2-7所示。

图2-7 页面效果

如果更新了计算属性依赖的数据会怎么样呢？

比如我们更新了data中的score，那么计算属性函数resultText会重新执行计算并返回新的结果值，对应的页面元素会自动更新。下面通过代码对其进行测试。

我们为其增加了一个按钮“学习一段时间后重新测评”，当点击该按钮更新score的值后，h2标签中的内容也会被更新。同时计算属性函数resultText重新执行返回新的值，h3标签也显示为最新的计算属性值，如图2-8和图2-9所示。这里需要注意的是，每次更新依赖数据，计算属性函数都会重新执行计算。

图2-8 点击按钮前

图2-9 点击按钮后