通俗易懂了解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 ...
随机推荐
- Spring Boot 二十个注解
Spring Boot 二十个注解 占据无力拥有的东西是一种悲哀. Cold on the outside passionate on the insede. 背景:Spring Boot 注解的强大 ...
- 常用的js代码片段
1.单选框/手风琴 <script> $(document).ready(function(){ $("dd").on("click",functi ...
- python编程基础之一
编译:将全部代码转成二进制可执行文件 速度快, c,c++等 解释:一行一行的将代码解释 速度慢 python,php等 python简介:Guido van Rossum 1989年 常用的pyth ...
- Win10实现多用户同时进行远程桌面连接的解决方案
Win10无法实现多用户远程桌面连接的解决方案以下方法解决Win10无法同时多用户登录.推荐:win10正式版下载 以下为必要步骤需先进行组策略设置,完成后再选择方法1或2(推荐方法2): 远程桌面连 ...
- Vue成员获取
0828自我总结 Vue成员获取 一.vue中data的获取 1.获取data里面的某个变量 $data.msg也可以简写成msg 2.获取data全部内容 $data 二.获取vue中vue挂钩的对 ...
- php服务器有哪些
服务器按照功能可以分为:文件服务器.数据库服务器.web服务器.邮件服务器.代理服务器..... 而上述所有的服务器,均可以用php做开发,比如说做web服务器,常用的构架是php+Mysql+Apa ...
- AB实验的高端玩法系列2 - 更敏感的AB实验, CUPED！
背景 AB实验可谓是互联网公司进行产品迭代增加用户粘性的大杀器.但人们对AB实验的应用往往只停留在开实验算P值,然后let it go...let it go ... 让我们把AB实验的结果简单的拆解 ...
- ESP8266开发之旅 应用篇② OLED显示天气屏
1.前言 这一篇,博主将教大家怎么去实现一个简易版本的天气助手. 先来一个博主已经实现功能的图片,如下: 1.1 知识储备 本篇需要用到以下知识点: 运用到ArduinoJso ...
- 破解Android设备无法联调的谜题
这篇文章要感谢来自知乎的小伙伴:子非鱼,他最近被一件事情困惑,那就是:Android手机无法联调了.在解决完他的疑问后,突然意识到,其实自己在前一段时间也曾遇到同样的问题,最后居然还怀疑是电脑和手机不 ...
- Java基础（二十四）Java IO（1）输入/输出流
在Java API中,可以从其中读入一个字节序列的对象称作输入流,而可以向其中写入一个字节序列的对象称为输出流. 输入流的指向称为源,程序从指向源的输入流中读取数据. 输出流的指向是字节要去的目的地, ...