Vue 2.0学习笔记：computed属性的使用和优点

Vue 2.0 中的 Computed 属性 Computed 属性是 Vue 2.0 中的一个重要概念，它允许开发者在视图中快速计算显示的属性。这些计算将被缓存，并且只在需要时更新。 在学习 Vue 的模板相关知识时，我们知道在模板内可以使用表达式，而模板内的表达式是非常便利的。但是，这种遍历是有一定的限制的，它们实际上是用于一些简单的运算。如果在模板中放入太多的逻辑会让模板过重而且难以维护。 例如，在下面的示例中，模板不再简单和清晰： ```html <div id="app"> <h1>{{ message.split('').reverse().join('') }}</h1> </div> ``` 在这个示例中，模板不再简单和清晰。你必须看一段时间才能意识到，这里是想要显示变量 `message` 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。 这就是对于任何复杂逻辑，你都应当使用计算属性的原因。计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。 在 Vue 中，有多种方法为视图设置值： 1. 使用指令直接将数据值绑定到视图 2. 使用简单的表达式对内容进行简单的转换 3. 使用过滤器对内容进行简单的转换 4. 使用计算属性根据数据模型中的值或一组值来计算显示值 计算属性允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新。例如，我们可以在数据模型中有一个 `results` 数组： ```javascript data() { return { results: [ { name: 'English', marks: 70 }, { name: 'Math', marks: 80 }, { name: 'History', marks: 90 } ] } } ``` 假设我们想要查看所有主题的总数。我们不能使用 filters 或 expressions 来完成这个任务。filters 用于简单的数据格式，在应用程序的多个位置都需要它；expressions 不允许使用流操作或其他复杂的逻辑。他们应该保持简单。 这个时候，计算属性就可以派上用场。我们可以向模型中添加一个计算值，如下： ```javascript computed: { totalMark() { // 计算总分 return this.results.reduce((acc, curr) => acc + curr.marks, 0); } } ``` 在上面的示例中，我们使用计算属性来计算总分。这个计算将被缓存，并且只在需要时更新。 计算属性的优点： 1. 简化模板中的逻辑 2. 提高应用程序的性能 3. 使代码更加易于维护 计算属性是 Vue 2.0 中一个非常有用的功能，它可以帮助我们简化模板中的逻辑，提高应用程序的性能，并使代码更加易于维护。