一.计算属性:
我们在开发当中通常会遇到这种情况,需要返回的是两个变量的计算值 ,那我们就在computed属性中去定义计算的方法:
eg:
我们现在有两个变量:fristname 和 lastname 。我们想要页面输出的是fullname 全名:
方法一:用computed计算属性来实现(内置缓存机制)
当更改age的时候, fullName 函数不执行;
只有当更改 firstname或 lastname fullname才会执行
data(){
return{
firstname:'hani',
lastname:'wen',
age:‘12’
}
},
computed:{
fullname:function(){
return this.firstname + ' ' +this.lastname
}
},
OK,在页面上就显示fullname的值了。(当我们用插值表达式,表达式的值会先在data中找,找不到再去计算属性computed中找)
效果:
hani wen
方法二:当然方法也可以完成这个效果:(无内置缓存)
当更改age的时候, fullName 函数执行, 这样就增加了代码冗余,浏览器运行性能降低;
当更改fristName的时候, fullName 函数仍执行。
methods:{
fullname:function(){
return this.firstname + ' ' +this.lastname
}
}
在页面上调用方法:{{function()}}
<h1>{{fullname()}}<h1>
效果:
hani wen
但是方法和计算属性有什么区别呢?
方法没有缓存机制,计算属性的性能更好。
方法三:watch监听fristname 和 lastname 来实现(有内置缓存)
先初始化数据:
data(){
return{
firstname:'hani',
lastname:'wen',
fullname:'hani wen'
}
}
监听fristname 和lastname的变化,一旦有变化则触发:
watch:{
firstname:function(){
this.fullname =this.firstname +' '+this.lastname;
},
lastname:function(){
this.fullname = this.firstname + " "+this.lastname;
},
效果:
hani wen
虽然监听的方法能够实现计算的结果,也有缓存的机制,但是看起来冗余。
这三种综合来看,涉及到计算,还是用computed比较好。
二.计算属性的setter和getter
在computed中可以将fullname 定义成一个对象,在对象中定义get 和set 的方法。
computed:{
fullname:{
get:function(){
return this.firstname + ' ' +this.lastname
},
set:function(value){
console.log(value);
var arr = value.split(' ');
this.firstname = arr[0];
this.lastname = arr[1];
}
}
},
在调用上get没有改变。set方法,在控制台上输入:app.fullname=“dell Lee”,然后就会更新到该实例上的数据中,并在页面做出响应
计算属性和侦听器区别
计算属性的特点
当我们第一次使用计算属性的时候,会执行计算属性并进行计算,然后将计算属性结果缓存起来
后续我们在去使用计算属性的时候,如果计算属性使用的数据没有发生改变,那么就会直接读取缓存结果,不会重新计算
注意:每次计算的结果缓存的时候。都会重新创建一个便令保存结果
侦听器特点
当定义一个侦听器的时候,如果侦听器与data的属性同名,当属性的值发生改变的时候,侦听器就会被触发执行
注意:一个侦听器对应data中的一个属性,当属性发生变化时触发侦听器执行
分析结果:
从上面的特点来说,我们可以得出结论:
1).计算属性的应用场景是计算的内容需要依赖多个属性的情况
侦听器的应用场景是计算的内容依赖一个属性的情况
2).计算属性缓存结果时每次都会重新创建变量
而侦听器是直接计算,不会创建变量保存结果
也就意味着,数据如果会反复的发生变化,计算很多次的情况下,计算属性的开销将会更大,也就意味着这种情况不适合使用计算属性,适合使用侦听器
那么,如果一个数据反复会被使用,但是它计算依赖的内容很少发生变化的情况下,计算属性会缓存结果,就更加适合这种情况。
3).computed的结果是通过return返回的,而watch不需要return。
4).watch中的参数可以得到侦听属性改变的最新结果,而computed函数没有这种参数。
补充:
watch只会监听数据的值是否发生改变,而不会监听地址的变化,如果需要监听引用类型的数据变化,需要深度监听:obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
在特殊的情况下(更改数组中的数据时,数组已经更改,但是视图没有更新),watch无法监听数组的变化,更改数组必须要用splice()或者$set。
结论:
我们在计算开销比较大(计算次数多或者异步处理)的时候,会使用侦听器watch来得到计算结果。
而其他情况建议使用计算属性computed,因为缓存节省多次计算的性能。