通俗易懂了解Vue的计算属性
1.前言
之前在学习vue的过程中，一直没有搞明白计算属性是个怎么回事，以及为什么要有计算属性，使用计算属性有什么好处。今天花时间翻了翻官方文档，才搞清楚其中一二，现将学习心得总结记录如下。
2.为什么要使用计算属性
试想有这样一个场景：
当我们在网购的时候，打开购物车，我们在增加或减少购物车内货物的数量时，下面的消费总额也在随着联动变化。
那么有了这个场景，我们用vue来简单实现一下。话不多说，直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>请输入货物1的数量：<input type="text" v-model="package1.count"></span>
<span>请输入货物1的价格：<input type="text" v-model="package1.price"></span>
<br>
<span>请输入货物2的数量：<input type="text" v-model="package2.count"></span>
<span>请输入货物2的价格：<input type="text" v-model="package2.price"></span>
<br>
<span>货物1的数量是：{{package1.count}}</span>
<span>货物1的价格是：{{package1.price}}</span>
<br>
<span>货物2的数量是：{{package2.count}}</span>
<span>货物2的价格是：{{package2.price}}</span>
<br>
<span>货物总价是：{{package1.count*package1.price + package2.count*package2.price}}</span> </div>
<script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
package1:{
price:"",
count:""
},
package2:{
price:"",
count:""
}
}
}
})
</script>
</body>
</html>
我们知道，消费总额是通过购物车内货物的数量以及每件货物的价格计算得到的。因此，我们需要在模板内写很长很复杂的计算表达式，虽然能够实现功能，然而这并不是vue所推荐，并且在模板内放入太多的逻辑会让模板过重并且难以维护。所以，对于模板内的需要经过复杂计算或者复杂逻辑得出的变量，vue更推荐我们使用计算属性。
3.如何使用计算属性
使用计算属性，我们只需在vue实例内增加computed选项，然后在选项内编写属性名以及复杂的计算逻辑即可。
下面，我们使用计算属性将上面例子进行重写，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>请输入货物1的数量：<input type="text" v-model="package1.count"></span>
<span>请输入货物1的价格：<input type="text" v-model="package1.price"></span>
<br>
<span>请输入货物2的数量：<input type="text" v-model="package2.count"></span>
<span>请输入货物2的价格：<input type="text" v-model="package2.price"></span>
<br>
<span>货物1的数量是：{{package1.count}}</span>
<span>货物1的价格是：{{package1.price}}</span>
<br>
<span>货物2的数量是：{{package2.count}}</span>
<span>货物2的价格是：{{package2.price}}</span>
<br>
<span>货物总价是：{{totalPrice}}</span>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
package1:{
price:"",
count:""
},
package2:{
price:"",
count:""
}
}
},
computed:{
totalPrice:function () {
return this.package1.count*this.package1.price + this.package2.count*this.package2.price
}
}
})
</script>
</body>
</html>
从代码中，我们可以看到，我们给computed选项内增加了货物总价totalPrice属性，并且将计算的过程写在了属性内，而模板中只用写{{ totalPrice }}即可。
4.使用计算属性有什么好处
尽管vue不推荐我们在模板内写复杂的计算逻辑，可是我们可以在methods选项内写一个方法照样可以实现上面的需求呀，请看如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>请输入货物1的数量：<input type="text" v-model="package1.count"></span>
<span>请输入货物1的价格：<input type="text" v-model="package1.price"></span>
<br>
<span>请输入货物2的数量：<input type="text" v-model="package2.count"></span>
<span>请输入货物2的价格：<input type="text" v-model="package2.price"></span>
<br>
<span>货物1的数量是：{{package1.count}}</span>
<span>货物1的价格是：{{package1.price}}</span>
<br>
<span>货物2的数量是：{{package2.count}}</span>
<span>货物2的价格是：{{package2.price}}</span>
<br>
<span>货物总价是：{{totalPrice()}}</span>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
package1:{
price:"",
count:""
},
package2:{
price:"",
count:""
}
}
},
methods:{
totalPrice(){
return this.package1.count*this.package1.price + this.package2.count*this.package2.price
}
}
})
</script>
</body>
</html>
注意看上面标红处的代码，我们实现了一个计算货物总价的方法，然后在模板内调用该方法即可，这样也实现了上面的需求。
既然如此，写一个方法也可以实现我们的需求，那么，vue推荐我们使用计算属性，到底这个计算属性有什么好处呢？
其实不然，我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要货物的数量和价格没有发生改变，多次访问totalPrice计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算，如果采用计算属性，那么只需计算一次，计算结果将会被缓存下来，我们可能还有其他的计算属性依赖于 A，这样A就不会被多次计算从而节省性能 。但是，如果使用方法调用的话，每使用一次A，函数就会被执行一次，这无疑会造成性能上的浪费。当然如果你不希望有缓存，那么就采用方法调用的方式来替代。
5.计算属性使用技巧
技巧一：计算属性不仅可以依赖data里的数据，多个计算属性之间也可以互相依赖。
例如：我们给上面的需求增加一个货物总价打八折后的价格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span>请输入货物1的数量：<input type="text" v-model="package1.count"></span>
<span>请输入货物1的价格：<input type="text" v-model="package1.price"></span>
<br>
<span>请输入货物2的数量：<input type="text" v-model="package2.count"></span>
<span>请输入货物2的价格：<input type="text" v-model="package2.price"></span>
<br>
<span>货物1的数量是：{{package1.count}}</span>
<span>货物1的价格是：{{package1.price}}</span>
<br>
<span>货物2的数量是：{{package2.count}}</span>
<span>货物2的价格是：{{package2.price}}</span>
<br>
<span>货物总价是：{{totalPrice}}</span>
<br>
<span>打折后总价是：{{cheapPrice}}</span>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
package1:{
price:"",
count:""
},
package2:{
price:"",
count:""
}
}
},
computed:{
totalPrice:function () {
return this.package1.count*this.package1.price + this.package2.count*this.package2.price
},
cheapPrice:function () {
return this.totalPrice*0.8
}
}
})
</script>
</body>
</html>
如标红处的代码，打折后的总价cheapPrice这个计算属性依赖了上面的货物总价totalPrice这个计算属性。
技巧二：计算属性不仅可以依赖自身实例内的数据，也可以依赖其他实例内的数据。
var vm1 = new Vue({
data(){
return{
package:{
price:"",
count:""
}
}
},
})
var vm2 = new Vue({
el:"#app",
data(){
return{
package:{
price:"",
count:""
}
}
},
computed:{
totalPrice:function () {
return vm1.package.count*vm1.package.price + this.package.count*this.package.price
},
cheapPrice:function () {
return this.totalPrice*0.8
}
}
})
（完）
通俗易懂了解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之计算属性
上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...
随机推荐
- QQ第三方授权登录OAuth2.0实现（Java）
准备材料 1.已经备案好的域名 2.服务器(域名和服务器为统一主体或域名已接入服务器) 3.QQ号 4.开发流程:https://wiki.connect.qq.com/%E5%87%86%E5%A4 ...
- 即学即用的 30 段 Python 实用代码
[☞ 分享:最全最新的Python学习大礼包 ☜ 点击查看](https://mp.weixin.qq.com/s?__biz=MzU2MzgyODA4OA==&mid=100000592&a ...
- WebGL简易教程(十一)：纹理
目录 1. 概述 2. 实例 2.1. 准备纹理 2.2. 配置纹理 2.3. 使用纹理 3. 结果 4. 参考 1. 概述 在之前的之前的教程<WebGL简易教程(九):综合实例:地形的绘制& ...
- python基本数据类型及常用功能
1.数字类型 int -int(将字符串转换为数字) a = " print(type(a),a) b = int(a) print(type(b),b) num = " v = ...
- python编程基础之十九
字符串判断常用函数: str.isalpha() # 判断是否是全字母 str.isdigit() # 判断是否是全数字 str.isalnum() # 判断是否是字母和数字组合 str.is ...
- 【源码解析】自动配置的这些细节不知道，别说你会 springboot
spring-boot 相对于 spring,很重要的一个特点就是自动配置,使约定大于配置思想成功落地.xxx-spring-boot-starter 一系列引导器能够开箱即用,或者只需要很少的配置( ...
- net core WebApi——使用NPOI导入导出操作
目录 前言 NPOI 测试 小结 @ 前言 时间过得好快,在之前升级到3.0之后,就感觉好久没再动过啥东西了,之前有问到Swagger的中文汉化,虽说我觉得这种操作的意义不是太大,也是多少鼓捣了下,其 ...
- 易错、经典问题：return不可返回指向栈内存的指针
预备知识:内存的分类 C/C++程序占用的内存分为两大类:静态存储区与动态存储区.其示意图如下所示: 数据保存在静态存储区与动态存储区的区别就是:静态存储区在编译-链接阶段已经确定了,程序运行过程中不 ...
- 后门免杀工具-Backdoor-factory
水一水最近玩的工具 弄dll注入的时候用到的 介绍这款老工具 免杀效果一般..但是简单实用 目录: 0x01 backdoor-factory简介 0x02 特点功能 0x03 具体参数使用 PS: ...
- wireshark分析https
0x01 分析淘宝网站的https数据流 打开淘宝 wireshark抓取到如下 第一部分: 因为https是基于http协议上的,可以看到首先也是和http协议一样的常规的TCP三次握手的连接建立, ...