通俗易懂了解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 ...
随机推荐
- Android通过外部浏览器调用微信H5支付，Android+PHP详解
看了好多关于讲解微信H5支付开发的文章,大多数都是通过微信内部浏览器来调用支付接口(其实就是公众号支付),可能是因为H5支付接口刚开放不久吧. 微信官方体验链接:http://wxpay.wxutil ...
- Unknown column 'user_id' in 'where clause'
mapper位置报错Unknown column 'user_id' in 'where clause' 可能是数据库中的字段user_id包含空格
- Unicode 和 UTF-8 之间的关系
一.ASCII 码 我们知道,计算机内部,所有信息最终都是一个二进制值.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是说,一个 ...
- StringBuffer的一些小整理
大家好,欢迎大家在百忙当中来到我的博客文,也许是因为各种需要到此一游,哈哈.不过来到这里不会让您失望的,此段博文是这段时间不忙的时候整理出来的,对于刚学java基础的同学非常适合.下面言归正传: 首先 ...
- 张高兴的 .NET Core IoT 入门指南：（五）串口通信入门
在开始之前,首先要说明的是串口通信所用到的 SerialPort 类并不包含在 System.Device.Gpio NuGet 包中,而是在 System.IO.Ports NuGet 包中.之所以 ...
- MySQL基础（三）多表查询（各种join连接详解）
Mysql 多表查询详解 一.前言 二.示例 三.注意事项 一.前言 上篇讲到Mysql中关键字执行的顺序,只涉及了一张表:实际应用大部分情况下,查询语句都会涉及到多张表格 : 1.1 多表连接有哪些 ...
- Sieve of Eratosthenes时间复杂度的感性证明
上代码. #include<cstdio> #include<cstdlib> #include<cstring> #define reg register con ...
- [网络流 24 题] luoguP4016 负载平衡问题
[返回网络流 24 题索引] 题目描述 有成环状的 nnn 堆纸牌,现将一张纸牌移动到其邻堆称为一次操作.求使得所有堆纸牌数相等的最少移动次数. Solution 4016\text{Solution ...
- 微服务架构 ------ Day01 微服务架构优缺点
1. 微服务架构的优点 庞大的单体程序 -> 一套微型程序. 每一个服务有明确的边界(服务之间的消息通讯机制) ,每一个服务都能单独的开发和维护,并且更好理解 每一个服务都能由一个团队来开发,当 ...
- spring boot配置Servlet容器
Spring boot 默认使用Tomcat作为嵌入式Servlet容器,只需要引入spring-boot-start-web依赖,默认采用的Tomcat作为容器 01 定制和修改Servlet容器 ...