Vue 2.0学习笔记:computed属性的使用和优点
125 浏览量
更新于2024-09-05
收藏 139KB PDF 举报
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 中一个非常有用的功能,它可以帮助我们简化模板中的逻辑,提高应用程序的性能,并使代码更加易于维护。
643 浏览量
2018-02-01 上传
2021-03-16 上传
157 浏览量
251 浏览量
148 浏览量
237 浏览量
344 浏览量
167 浏览量

weixin_38724919
- 粉丝: 5
最新资源
- Linux平台PSO服务器管理工具集:简化安装与维护
- Swift仿百度加载动画组件BaiduLoading
- 传智播客C#十三季完整教程下载揭秘
- 深入解析Inter汇编架构及其基本原理
- PHP实现QQ群聊天发言数统计工具 v1.0
- 实用AVR驱动集:IIC、红外与无线模块
- 基于ASP.NET C#的学生学籍管理系统设计与开发
- BEdita Manager:官方BEdita4 API网络后台管理应用入门指南
- 一天掌握MySQL学习笔记及实操练习
- Sybase数据库安装全程图解教程
- Service与Activity通信机制及MyBinder类实现
- Vue级联选择器数据源:全国省市区json文件
- Swift实现自定义Reveal动画播放器效果
- 仿53KF在线客服系统源码发布-多用户版及SQL版
- 利用Android手机实现远程监视系统
- Vue集成UEditor实现双向数据绑定