Vue 2.0学习笔记:computed属性的使用和优点
PDF格式 | 139KB |
更新于2024-09-05
| 166 浏览量 | 举报
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 中一个非常有用的功能,它可以帮助我们简化模板中的逻辑,提高应用程序的性能,并使代码更加易于维护。
相关推荐










weixin_38724919
- 粉丝: 5
最新资源
- C#实现桌面飘雪效果,兼容Win7及XP系统
- Swift扩展实现UIView视差滚动效果教程
- SQLServer 2008/2005版驱动sqljdbc4.jar下载
- 图像化操作的apk反编译小工具介绍
- 掌握IP定位技术,轻松获取城市信息
- JavaFX项目计划应用PlanAmity代码库介绍
- 新华龙C8051系列芯片初始化配置教程
- readis:轻松从多Redis服务器获取数据的PHP轻量级Web前端
- VC++开发的多功能计算器教程
- Android自定义图表的Swift开发示例解析
- 龙门物流管理系统:Java实现的多技术项目源码下载
- sql2008与sql2005的高效卸载解决方案
- Spring Boot微服务架构与配置管理实战指南
- Cocos2d-x跑酷项目资源快速导入指南
- Java程序设计教程精品课件分享
- Axure元件库69套:全平台原型设计必备工具集