vue 计算属性和data_Vue:计算属性
一、为什么要使用计算属性
1、什么是计算属性
计算属性：可以理解为能够在里面写一些计算逻辑的属性。具有如下的作用：
减少模板中的计算逻辑。
数据缓存。当我们的数据没有变化的时候，不会再次执行计算的过程。
依赖固定的数据类型(响应式数据)，不能是普通的传入的一个全局数据。
在数据量比较大的时候，计算属性可以帮助我们提高性能，因为计算属性只会在数据变化的时候才会计算。
在讲解计算属性之前先来看下面的一个例子：
需求：外卖套餐A每份15元，客户点了3份，总价打八折，配送费5元，要求在界面显示总价，代码如下：
总价：{{info.count*info.price*info.sale+info.freight}}元
name:'Test',
data(){return{
info:{
userId:1,
price:15,
name:'套餐A',
count:3,
sale:0.8,
freight:5}
}
}
}
界面运行效果：
看了上面的例子，可能有人会问：使用这种方式已经实现了需求，那为什么还要使用计算属性呢？我们知道，vue中模板内的表达式非常便利，设计的初衷是用于简单运算的。如果在模板中放入太多的逻辑会让模板过重而且难以维护，看上面的代码：
总价：{{info.count*info.price*info.sale+info.freight}}元
在这段代码中，模板不在是简单的声明式逻辑，而是复杂的逻辑计算，如果想要在多处引用总价的时候，就会难以维护。所以，对于任何复杂的逻辑，都应当使用计算属性。
看下面使用计算属性的例子：
计算属性
总价：{{totalPrice}}元
name:'ComputedDemo',
data(){return{
info:{
userId:1,
price:15,
name:'套餐A',
count:3,
sale:0.8,
freight:5}
}
},
computed:{//定义计算属性totalPrice
totalPrice:function(){return this.info.count*this.info.price*this.info.sale+this.info.freight
}
}
}
界面显示效果：
注意：计算属性是一个属性，不是方法，不能写在methods中，放在computed属性里面。
上面计算属性的写法也可以使用ES6的写法：
//使用ES6写法
totalPrice(){return this.info.count*this.info.price*this.info.sale+this.info.freight
}
二、计算属性和方法的区别
1、区别
上面的例子除了使用计算属性，还可以使用方法实现：
计算属性
使用计算属性获取总价：{{totalPrice}}元
使用方法获取总价：{{getTotalPrice()}}元
name:'ComputedDemo',
data(){return{
info:{
userId:1,
price:15,
name:'套餐A',
count:3,
sale:0.8,
freight:5}
}
},
computed:{//定义计算属性totalPrice
//totalPrice:function(){
//return this.info.count*this.info.price*this.info.sale+this.info.freight;
//}
//使用ES6写法
totalPrice(){return this.info.count*this.info.price*this.info.sale+this.info.freight;
}
},
methods:{
getTotalPrice(){return this.info.count*this.info.price*this.info.sale+this.info.freight;
}
}
}
界面显示效果：
通过上面的例子可以看出：计算属性和方法实现的最终效果是相同的。那么计算属性和方法有什么区别呢？计算属性是基于它们的响应式依赖进行缓存的，只有在响应式依赖发生改变时才会重新求值。这就意味着只要响应式依赖没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算。相比之下，调用方法总会再次执行函数。总价计算属性和方法的区别如下：
计算属性在依赖发生改变时会自动改变，而方法在依赖发生改变时需要触发才会改变。
计算属性在依赖发生改变时才会重新计算，而方法在每次调用时都会执行。
看下面的例子：
计算属性
您购买了数量
使用计算属性获取总价：{{totalPrice}}元
计算属性
使用方法获取总价：{{data}}元
name:'ComputedDemo',
data(){return{
info:{
userId:1,
price:15,
name:'套餐A',
count:3,
sale:0.8,
freight:5},
data:0}
},
computed:{//定义计算属性totalPrice
//totalPrice:function(){
//return this.info.count*this.info.price*this.info.sale+this.info.freight;
//}
//使用ES6写法
totalPrice(){
console.log('计算属性');return this.info.count*this.info.price*this.info.sale+this.info.freight;
}
},
methods:{
getTotalPrice(){
console.log('方法');this.data= this.info.count*this.info.price*this.info.sale+this.info.freight;
}
}
}
当依赖发生改变时会多次打印“计算属性”，而方法需要在点击按钮的时候才会发生改变。依赖不发生改变时点击按钮，也会打印“方法”。如下图所示：
2、计算属性使用场景
假如我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算，然后我们可能有其他的计算属性依赖于计算属性A。如果不使用计算属性，那么将不可避免的多次进行计算，会消耗很大的性能，这种情况下就需要使用计算属性。
三、修改计算属性的值
在上面的例子中都是使用的获取后的计算属性的值，那么如何修改计算属性的值呢？看下面的例子：
修改计算属性
num:{{num}}
计算属性num2:{{num2}}
改变计算属性的值
name:'ComputedDemo2',
data(){return{
num:100}
},
computed:{
num2(){return this.num-10;
}
},
methods:{
change(){this.num2=60;
}
}
}
效果：
这时会发现直接修改计算属性的值报错了，因为不能直接修改计算属性的值，如果要修改计算属性的值，需要修改其依赖项的值，看下面的代码：
修改计算属性
num:{{num}}
计算属性num2:{{num2}}
改变计算属性的值
exportdefault{
name:'ComputedDemo2',
data(){return{
num:100}
},
computed:{
num2:{//当计算属性要修改时先触发set方法
//读取当前计算属性中的值,get方法可以隐藏，默认进入的是get方法
get:function(){return this.num-10;
},
set:function(val){this.num=val;
}
}
},
methods:{
change(){//计算属性不能直接修改
this.num2=60;
}
}
}
修改前的效果：
修改后的效果：
总结
计算属性的值不能修改，如果要修改计算属性的值，要通过计算属性里面的set方法修改其依赖项的值才能修改计算属性的值。
四、监听属性
监听属性(watch)是用来监听data中的数据是否发生变化，一般是监听data中的某个属性。
更加灵活、通用的API。
watch中可以执行任何逻辑，如函数节流，Ajax异步获取数据，甚至操作DOM。
1、监听普通属性
看下面的代码：
监听属性
姓名：
{{userName}}
年龄：
{{age}}
name:'watchDemo',
data(){return{
userName:"abc",
age:23}
},
methods:{
change(){
}
},
watch:{//监听userName的变化
//有两个参数，newValue表示变化后的值，oldValue表示变化前的值
userName:function(newValue,oldValue){
console.log('修改前的值：'+oldValue);
console.log('修改后的值：'+newValue);
},//监听age的变化
age:function(newValue,oldValue){
console.log('修改前的值：'+oldValue);
console.log('修改后的值：'+newValue);
}
}
}
界面效果：
2、监听属性和计算属性的区别
监听属性和计算属性的区别主要有下面几点：
计算属性性能更优。一个监听属性只能监听一个属性的变化，如果要同时监听多个，就要写多个监听属性，而计算属性可以同时监听多个数据的变化。
监听属性可以获取改变之前的属性值。
计算属性能做的，watch都能做，反之则不行。
能用计算属性尽量用计算属性。
需求：userName或age改变的时候打印出当前的userName和age值。
用监听属性实现：
监听属性
姓名：
{{userName}}
年龄：
{{age}}
{{info}}
name:'watchDemo',
data(){return{
userName:"abc",
age:23,
info:''}
},
methods:{
change(){
}
},
watch:{//监听userName的变化
//有两个参数，newValue表示变化后的值，oldValue表示变化前的值
userName:function(newValue,oldValue){//console.log('修改前的值：'+oldValue);
//console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
},//监听age的变化
age:function(newValue,oldValue){//console.log('修改前的值：'+oldValue);
//console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
}
}
}
如果要实现上述的需求，则需要对userName和age都进行监听，监听属性里面的代码都是重复的，如果有多个，那么就要写多个监听属性。在看计算属性：
监听属性
姓名：
{{userName}}
年龄：
{{age}}
{{getUserInfo}}
name:'watchDemo',
data(){return{
userName:"abc",
age:23,
info:''}
},
methods:{
change(){
}
},//watch:{
监听userName的变化
有两个参数，newValue表示变化后的值，oldValue表示变化前的值
//userName:function(newValue,oldValue){
console.log('修改前的值：'+oldValue);
console.log('修改后的值：'+newValue);
//this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
//},
监听age的变化
//age:function(newValue,oldValue){
console.log('修改前的值：'+oldValue);
console.log('修改后的值：'+newValue);
//this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
//}
//}
computed:{
getUserInfo(){return '我的姓名:'+ this.userName+',年龄:'+this.age;
}
}
}
如果使用计算属性则只需要写一次就可以实现上面的需求了。
3、监听复杂对象
上面的例子中是监听的普通属性，那么如何监听对象里面的属性呢？看下面的代码：
监听属性
姓名：
{{userName}}
年龄：
{{age}}
{{getUserInfo}}
监听对象属性
姓名：
{{obj.name}}
name:'watchDemo',
data(){return{
userName:"abc",
age:23,
info:'',//对象
obj:{
name:'123'}
}
},
methods:{
change(){
}
},
watch:{//监听userName的变化
//有两个参数，newValue表示变化后的值，oldValue表示变化前的值
userName:function(newValue,oldValue){//console.log('修改前的值：'+oldValue);
//console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
},//监听age的变化
age:function(newValue,oldValue){//console.log('修改前的值：'+oldValue);
//console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
},//监听对象中属性的变化
'obj.name':function(newValue,oldValue){
console.log('修改前的值：'+oldValue);
console.log('修改后的值：'+newValue);
}
},
computed:{
getUserInfo(){return '我的姓名:'+ this.userName+',年龄:'+this.age;
}
}
}
效果：
能不能执行监听对象呢？答案是可以的，看下面代码：
监听属性
姓名：
{{userName}}
年龄：
{{age}}
{{getUserInfo}}
监听对象属性
姓名：
{{obj.name}}
监听对象
姓名：
{{obj.name}}
name:'watchDemo',
data(){return{
userName:"abc",
age:23,
info:'',//对象
obj:{
name:'123'}
}
},
methods:{
change(){
}
},
watch:{//监听userName的变化
//有两个参数，newValue表示变化后的值，oldValue表示变化前的值
userName:function(newValue,oldValue){//console.log('修改前的值：'+oldValue);
//console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
},//监听age的变化
age:function(newValue,oldValue){//console.log('修改前的值：'+oldValue);
//console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
},//监听对象中属性的变化
//'obj.name':function(newValue,oldValue){
//console.log('修改前的值：'+oldValue);
//console.log('修改后的值：'+newValue);
//}
//直接监听对象
obj:{//handler表示默认执行的函数
handler(newValue,oldValue){
console.log('修改前的值：')
console.log(oldValue);
console.log('修改后的值：');
console.log(newValue);
},//表示深度监听
//true：表示handler函数会执行
//false：表示handler函数不会执行
deep:true}
},
computed:{
getUserInfo(){return '我的姓名:'+ this.userName+',年龄:'+this.age;
}
}
}
效果：
GitHub代码地址：https://github.com/JiangXiaoLiang1988/computed.git
vue 计算属性和data_Vue:计算属性相关推荐
- vue 计算属性和data_Vue计算属性原理和使用场景
计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情.特点: 监测的是依赖值,依赖值不变的情况下其会直接读取缓存进行复用,变化的情况下才会 ...
- vue 计算属性和data_Vue 计算属性问题？
1.代码复用 computed: { position() { return ((!this.right || this.right < 0) ? 0 : (this.right > 75 ...
- vue 计算属性和data_vue之watch和计算属性computed
区别一:watch监听的是一个变量(或者一个常量)的变化,这个变量可能是一个单一的变化也可能是一个数组.computed可以监听很多个变量,但是这个变量一定是vue实例里面的. Vue 测试实例 - ...
- vue 计算属性和data_Vue.js教程（五）--Vue的计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: {{ message.split('').reverse().join('') }} ...
- Vue计算属性和监听属性
一.计算属性 计算属性关键词: computed.计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <div id="app">{{ messa ...
- Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例
1 插值操作 1.1 Mustache语法 也就是双大括号 {{ }} <div id="app"> <!-- mustche语法中,不仅可以直接写变量,也可以写 ...
- vue源码-对于「计算属性」的理解
vue源码-对于「计算属性」的理解 这是我最近学习vue源码的一个个人总结和理解,所以可能并不适合每一位读者 本文的整体脉络如下,首先尽可能去掉细节,对计算属性源码的大致实现有一个了解,然后举一例子, ...
- oclick vue 传参 函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货 作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
- 关于Vue中计算属性computed和methods属性的区别，你了解多少呢
文章目录 1.实例 2.computed计算属性中: 前提1.当计算属性fn2没有依赖data中的数据时: 前提2.:当计算属性依赖data中的数据时: 3.区别: 在做项目过程中,有时会出现同一个需 ...
最新文章
- JS中window.event事件使用详解
- 基于verilog的FPGA编程经验总结(XILINX ISE工具)
- 800名科学家Nature联名发文主张废除p值！
- countif和sum套用_if函数嵌套countif、sumif函数实例操作详解 你需要学习了
- Apache Common HttpClient使用之七种武器
- 关于不同用户进入系统报错的请求
- 2019.01.26【NOIP普及组】模拟赛C组总结
- HDU1465 不容易系列之一【递推】
- 视频直播卡顿分析及优化
- Git的下载安装 (图文教程)
- Visual Studio Installer 无法下载安装，长时间停留在下载界面。vs_community__1502218517.1623916988.exe
- Python3之数据结构
- VUE基础用法（四）
- 批量去除PDF的水印（完全免费）
- 易语言c源码流程图怎么实现,易语言APC内存注入主要流程源码
- 分享某盘不限速神器，免费好用
- 多媒体——图片——使用相机拍摄图片
- 最新cydia安装包和依赖包
- “不念过往，不畏将来”——2017年山东省第八届ACM大学生程序设计竞赛总结
- 【mysql体系结构】mysql的配置文件