通俗易懂了解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 ...
随机推荐
- 【Visual Studio】关于vs 打开网站时报错 配置iis express失败 无法访问IIS元数据库...
关于vs 打开网站时报错 配置iis express失败 无法访问IIS元数据库... 我安装了vs2015,一开始创建项目,网站都没问题,有一次突然打开项目时报错,瞬间懵逼,我啥都没干啊!!! 网上 ...
- LitePal的存储操作
传统的存储数据方式 其实最传统的存储数据方式肯定是通过SQL语句拼接字符串来进行存储的,不过这种方式有点过于“传统”了,今天我们在这里就不讨论这种情况.实际上,Android专门提供了一种用于存储 ...
- Python3数据分析与挖掘建模实战 ☝☝☝
Python3数据分析与挖掘建模实战 Python数据分析简介 Python入门 运行:cmd下"python hello.py" 基本命令: 第三方库 安装 Windows中 p ...
- 渗透测试-基于白名单执行payload--Msiexec
复现亮神课程 基于白名单执行payload--Msiexec 0x01 关于msiexec Msiexec 是 Windows Installer 的一部分.用于安装 Windows Install ...
- Linux系统基础
Linux系统基础 目录 简介 0x01 Linux文件与目录管理 0x02 Linux系统用户以及用户组管理 0x03文档的压缩与打包 0x04 apt安装软件 0x05 进程管理 标签 Lin ...
- 爬虫3：html页面+webdriver模块+demo
保密性好的网站,不能使用request请求页面信息,这样可以使用webdriver模块先开启一个浏览器,然后爬去信息,甚至还可以click等操作对页面操作,再爬取. demo 一般流程: 1)包含se ...
- [HDU5001]Walk
Problem Description I used to think I could be anything, but now I know that I couldn't do anything. ...
- MOOC python笔记(三) 序列容器：字符串、列表、元组
容器概念 容器是Python中的重要概念,分为有序与无序. 有序容器也称为序列类型容器,如:字符串.列表. 通用序列容器操作 容器连接+ 加号可以把两个序列连接成一个更大的容器,相加后两个序列的值并不 ...
- unittest断言
assertEquals(expected,actual,msg=msg) # 判断 expected,actual是否一致,msg类似备注,可以为空
- IDEA+docker，进行远程漏洞调试（weblogic）
用于学习java漏洞debug. 以weblogic为例. cve-2017-10271 weblogic:10.3.6 环境搭建 拿docker为例 https://github.com/vulhu ...