html5移动网站制作教程,郑州软件开发定制,VIP视频自助网站建设,优化电池充电有必要开吗一、为什么要使用计算属性1、什么是计算属性计算属性#xff1a;可以理解为能够在里面写一些计算逻辑的属性。具有如下的作用#xff1a;减少模板中的计算逻辑。数据缓存。当我们的数据没有变化的时候#xff0c;不会再次执行计算的过程。依赖固定的数据类型(响应式数据)可以理解为能够在里面写一些计算逻辑的属性。具有如下的作用减少模板中的计算逻辑。数据缓存。当我们的数据没有变化的时候不会再次执行计算的过程。依赖固定的数据类型(响应式数据)不能是普通的传入的一个全局数据。在数据量比较大的时候计算属性可以帮助我们提高性能因为计算属性只会在数据变化的时候才会计算。在讲解计算属性之前先来看下面的一个例子需求外卖套餐A每份15元客户点了3份总价打八折配送费5元要求在界面显示总价代码如下您购买了{{info.name}}共{{info.count}}份总价{{info.count*info.price*info.saleinfo.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.saleinfo.freight}}元在这段代码中模板不在是简单的声明式逻辑而是复杂的逻辑计算如果想要在多处引用总价的时候就会难以维护。所以对于任何复杂的逻辑都应当使用计算属性。看下面使用计算属性的例子计算属性您购买了{{info.name}}共{{info.count}}份总价{{totalPrice}}元name:ComputedDemo,data(){return{info:{userId:1,price:15,name:套餐A,count:3,sale:0.8,freight:5}}},computed:{//定义计算属性totalPricetotalPrice:function(){return this.info.count*this.info.price*this.info.salethis.info.freight}}}界面显示效果注意计算属性是一个属性不是方法不能写在methods中放在computed属性里面。上面计算属性的写法也可以使用ES6的写法//使用ES6写法totalPrice(){return this.info.count*this.info.price*this.info.salethis.info.freight}二、计算属性和方法的区别1、区别上面的例子除了使用计算属性还可以使用方法实现计算属性您购买了{{info.name}}共{{info.count}}份使用计算属性获取总价{{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.salethis.info.freight;//}//使用ES6写法totalPrice(){return this.info.count*this.info.price*this.info.salethis.info.freight;}},methods:{getTotalPrice(){return this.info.count*this.info.price*this.info.salethis.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.salethis.info.freight;//}//使用ES6写法totalPrice(){console.log(计算属性);return this.info.count*this.info.price*this.info.salethis.info.freight;}},methods:{getTotalPrice(){console.log(方法);this.data this.info.count*this.info.price*this.info.salethis.info.freight;}}}当依赖发生改变时会多次打印“计算属性”而方法需要在点击按钮的时候才会发生改变。依赖不发生改变时点击按钮也会打印“方法”。如下图所示2、计算属性使用场景假如我们有一个性能开销比较大的计算属性A它需要遍历一个巨大的数组并做大量的计算然后我们可能有其他的计算属性依赖于计算属性A。如果不使用计算属性那么将不可避免的多次进行计算会消耗很大的性能这种情况下就需要使用计算属性。三、修改计算属性的值在上面的例子中都是使用的获取后的计算属性的值那么如何修改计算属性的值呢看下面的例子修改计算属性num:{{num}}计算属性num2:{{num2}}改变计算属性的值name:ComputedDemo2,data(){return{num:100}},computed:{num2(){return this.num-10;}},methods:{change(){this.num260;}}}效果这时会发现直接修改计算属性的值报错了因为不能直接修改计算属性的值如果要修改计算属性的值需要修改其依赖项的值看下面的代码修改计算属性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.numval;}}},methods:{change(){//计算属性不能直接修改this.num260;}}}修改前的效果修改后的效果总结计算属性的值不能修改如果要修改计算属性的值要通过计算属性里面的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
