3. Vue语法--计算属性
一. 计算属性
1. 什么是计算属性?
通常, 我们是在模板中, 通过插值语法显示data的内容, 但有时候我们可能需要在{{}}里添加一些计算, 然后在展示出来数据. 这时我们可以使用到计算属性
先来举个例子, 比如: 一个班, 有几个学生参加期末考试, 要计算考试的平均分. 我们来看看, 通常要怎么做?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">考试成绩
<ul>
<li v-for="stu in students">{{stu.name}} -- {{stu.score}}</li>
</ul> <p>平均分: <label>{{getAvg()}}</label></p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:"班级考试平均分",
students: [
{name:"张三", score:90},
{name:"lisi", score:100},
{name:"wangwu", score:99},
{name:"zhaoliu", score:89},
{name:"liuqi", score:95}
]
},
methods: {
getAvg() {
let sum = 0;
for (let i = 0; i < this.students.length; i++) {
console.log(this.students[i].score);
let stu = this.students[i];
sum += stu.score;
}
console.log("平均分:" + sum/this.students.length);
return sum/this.students.length;
}
}
})
</script>
</body>
</html>
我们定义了一组学生的成绩. 然后将其显示在页面上, 然后通过方法getAvg计算平均分.
这里我们在获取平均分的时候, 使用的是{{getAve()}} 其实, 平均分我们理解更像是一个属性, 而不是一个方法. 为了方便计算, vue给我们提供了一个computed属性, 专门用来做计算. computed中定义的也是方法, 这个方法的方法名通常都定义为名词. 我们来看一下使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">考试成绩
<ul>
<li v-for="stu in students">{{stu.name}} -- {{stu.score}}</li>
</ul> <p>平均分: <label>{{avg}}</label></p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:"班级考试平均分",
students: [
{name:"zhangsan", score:90},
{name:"lisi", score:100},
{name:"wangwu", score:99},
{name:"zhaoliu", score:89},
{name:"liuqi", score:95}
]
},
computed: {
avg: function() {
let sum = 0;
for (let i = 0; i < this.students.length; i++) {
console.log(this.students[i].score);
let stu = this.students[i];
sum += stu.score;
}
console.log("平均分:" + sum/this.students.length);
return sum/this.students.length;
}
},
methods: { }
})
</script>
</body>
</html>
这里,增加了一个computed属性, 里面定义了avg方法, 没错, 本质还是方法, 但命名的时候, 将其命名为名词.
眼尖的同学应该已经发现了, 这好像和methods方法一样啊, 就是换了个名字. 那computed计算属性和methods方法有什么区别呢?
2. 计算属性computed的缓存功能
我们用案例来说明他们之间的区别.
案例1. methods方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p> Origin Message: {{message}}</p>
<p>Mthod Message:{{getMessage()}}</p>
<p>Mthod Grade:{{getGrade()}}</p>
<p>Mthod Class:{{getClass()}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:"班级考试平均分",
className: "1班",
gradeName:"一年级"
},
methods: {
getGrade: function(){
console.log("调用Grade计算")
return "方法" + this.gradeName
},
getClass: function(){
console.log("调用class计算")
return "方法" + this.className
},
getMessage: function(){
console.log("调用message计算")
return "方法" + this.message
}
}
})
</script>
</body>
</html>
我们发现, 在修改一个属性, 其他属性都没变化的情况下, 我们发现methods里的方法都被执行了一遍
案例2. computed计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p> Origin Message: {{message}}</p>
<p>Mthod Message:{{getMessage}}</p>
<p>Mthod Grade:{{getGrade}}</p>
<p>Mthod Class:{{getClass}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message:"班级考试平均分",
className: "1班",
gradeName:"一年级"
},
computed: {
getGrade: function(){
console.log("调用Grade计算")
return "方法" + this.gradeName
},
getClass: function(){
console.log("调用class计算")
return "方法" + this.className
},
getMessage: function(){
console.log("调用message计算")
return "方法" + this.message
}
}
})
</script>
</body>
</html>
控制台输出
我们发现, 当控制台修改其中一个属性值, 只有调用这个属性的方法会重新执行
案例3: 再看一个computed缓存的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>调用方法</p>
<p>{{getMes()}}</p>
<p>{{getMes()}}</p>
<p>{{getMes()}}</p>
<p>{{getMes()}}</p> <p>调用计算属性</p>
<p>{{mes}}</p>
<p>{{mes}}</p>
<p>{{mes}}</p>
<p>{{mes}}</p> </div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: "Elon",
lastName: "Musk"
},
computed: {
mes: function(){
console.log("调用计算属性")
return this.firstName + " " + this.lastName
}
},
methods: {
getMes: function(){
console.log("调用method方法")
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
这是两种方式的调用, 但是结果都一样, 都是打印输出姓名, 计算属性mes调用了四次, 方法getMes()也调用了四次, 我们来看看运行结果
两次打印的结果是一样的, 但是调用getMes()调用了4次, 而mes计算属性只计算了一次.
总结
- methods方法和computed计算属性，两种方式的最终结果确实是完全相同
- 不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，多次访问getMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
- methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。
所以，官网说，对于任何复杂逻辑，都应当使用计算属性。
3. 计算属性的getter和setter访问器
问题: 我们发现, 在计算属性和methods方法调用的是偶还有一点不同, 那就是调用方式不同. method方调用是{{getMessage()}}, 而计算属性是{{getMessage}}, 我们上面不是说计算属性中定义的也是方法么? 为什么不需要使用()呢? 下面来研究一下
还是这个案例, 我们来看看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{message}} {{avg}}</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "计算平均分:",
students: [
{name:"zhangsan", score:90},
{name:"lisi", score:100},
{name:"wangwu", score:99},
{name:"zhaoliu", score:89},
{name:"liuqi", score:95}
]
},
computed: {
avg: function() {
let sum = 0;
for (let i = 0; i < this.students.length; i++) {
console.log(this.students[i].score);
let stu = this.students[i];
sum += stu.score;
}
console.log("平均分:" + sum/this.students.length);
return sum/this.students.length;
} }
});
</script>
</body>
</html>
我们在计算平均分的时候, 是把avg当做一个属性来对待的, 所以,调用的时候这么写{{avg}}, 而不是{{avg()}}. 但是我们定义的时候却是给定义成方法了, 为什么会这样呢?
下面我们来研究computed完整的写法, 研究完这个, 就知道为什么这么写了.
- 其实计算属性本身是定义为了一个属性. 例如: 我们定义test, 通常我们定义属性是这么定义的
test: "这是一个属性"
- 在计算属性里, 属性值是一个对象, 所以, 我们要这么定义
computed: {
test: {
}
}
- 对象的内部有两个方法, 一个是get方法, 一个是set方法. 这时在get方法中return一个abc, 这是, 在页面显示的就应该是abc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{message}} --- {{avg}} --- {{test}}</div> <script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "计算平均分:",
students: [
{name:"zhangsan", score:90},
{name:"lisi", score:100},
{name:"wangwu", score:99},
{name:"zhaoliu", score:89},
{name:"liuqi", score:95}
]
},
computed: {
avg: function() {
let sum = 0;
for (let i = 0; i < this.students.length; i++) {
console.log(this.students[i].score);
let stu = this.students[i];
sum += stu.score;
}
console.log("平均分:" + sum/this.students.length);
return sum/this.students.length;
},
test : {
set: function(newValue) {
this.message = newValue;
console.log("调用setter")
},
get: function() {
return "abc"
}
}
}
});
</script>
</body>
</html>
看看效果
确实打印输出了abc
- 因为有get方法和set方法, 所以, 我们可以修改test的值, 如下: 修改了app.test的值, 最终改变了message的值.
- 然而, 计算属性通常只实现get方法, 而不实现set方法. 我们是计算后输出, 而不允许北外不修改, 这时计算属性就只剩下一个get方法, 最后我们将其简写, 去掉get, 就是我们通常看到的写法
computed: {
avg: function() {
let sum = 0;
for (let i = 0; i < this.students.length; i++) {
console.log(this.students[i].score);
let stu = this.students[i];
sum += stu.score;
}
console.log("平均分:" + sum/this.students.length);
return sum/this.students.length;
},
avg1 : function() {
return "abc"
}
}
虽然写法和method差不多. 但本质上, 计算属性还是属性, 所以, 和属性的写法是一样的.
as
3. Vue语法--计算属性的更多相关文章
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue.js 计算属性是什么
Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
- vue的计算属性
在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中 ...
- Vue.js 计算属性(computed)
Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...
- 一起学Vue之计算属性和侦听器
概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...
- vue中计算属性的get与set方法
计算属性get set方法 在vue的计算属性中,所定义的都是属性,可以直接调用 正常情况下,计算属性中的每一个属性对应的都是一个对象,对象中包括了set方法与get方法 computed:{ ful ...
- Vue.js 计算属性
Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...
- 浅谈Vue中计算属性（computed）和方法（methods）的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
随机推荐
- 【译】Async/Await（四）—— Pinning
原文标题:Async/Await 原文链接:https://os.phil-opp.com/async-await/#multitasking 公众号: Rust 碎碎念 翻译 by: Praying ...
- Spring Boot 微服务应用集成Prometheus + Grafana 实现监控告警
Spring Boot 微服务应用集成Prometheus + Grafana 实现监控告警 一.添加依赖 1.1 Actuator 的 /prometheus端点 二.Prometheus 配置 部 ...
- linux日志中查找关键字、前几行、结尾几行，Linux的find用法示例
linux在日志中查找关键字.前几行.结尾几行,Linux的find用法示例 1.linux在日志中查找关键字.前几行.结尾几行 1.1查看日志 前 n行: 1.2查看日志 尾 n行: 1.3根据 关 ...
- Linux忽略大小写的查找技巧（转）
1.vim 中的查找 Linux 下 vim搜索文件内容时加上 \c 参数可以忽略搜索字符的大小写. 比如用vim 搜索文件中的 China 时 可用 :/china\c 2. find 查找 Lin ...
- 封装SpringJdbcTemplate
package com.jy.modules.cms.query; import java.util.List; import java.util.Map; public interface quer ...
- Linux常用命令详解（第三章）（ping、kill、seq、du、df、free、date、tar）
本章命令(共7个): 1 2 3 4 5 6 7 8 ping kill seq du df free date tar 1." ping " 作用:向网络主机发送ICMP(检测主 ...
- 面试官：请讲一下Redis主从复制的功能及实现原理
摘要:Redis在主从模式下会有许多问题需要考虑,这里写了一些关于redis在多服务器下的一些问题分析和总结. Redis单节点存在单点故障问题,为了解决单点问题,一般都需要对redis配置从节点,然 ...
- .Net技术栈下的异步,你还在用同步方式进行开发吗?
关于异步,其实是个老生常谈的话题,也是各大公司面试常问的问题之一.本文就几个点来介绍异步解决的问题 注:对多线程的运行的基本机制要了解 1.介绍 有人可能会有疑问,为什么并行,非得用异步.多线程也已可 ...
- vue开发东京买菜,全栈项目,前端django,带手机GPS精准定位,带发票系统,带快递系统,带微信/支付宝/花呗/银行卡支付/带手机号一键登陆,等等
因为博客园不能发视频,所以,完整的视频,开发文档,源码,请向博主索取 完整视频+开发文档+源码,duanshuiLu.com下载 vue+django手机购物商城APP,带支付,带GPS精准定位用户, ...
- java面试必备String详解
引言 众所周知在java里面除了8种基本数据类型的话,还有一种特殊的类型String,这个类型是我们每天搬砖都基本上要使用它. String 类型可能是 Java 中应用最频繁的引用类型,但它的性能问 ...