Vue模板({{}})可以用来展示一些数据,但是遇到数据的逻辑比较复杂的时候,此时要怎么办呢?,这个时候就会用到Vue的计算属性:
基本用法
计算属性也是用来存储数据的,常用于逻辑比较复杂的计算但有着一下几个特点:
a)所有的计算属性一般以函数的形式写在Vue实例的computed选项中的,并最终返回计算后的结果。(或者是以一个对象的形式写在Vue实例中的computed选项中【有get 和set选项函数时】);
b)对计算属性中的数据进行监视(依赖发生变化的时候,计算属性的值也会随之改变);
c)计算属性归根结底还是数据(虽然要其值还是一个有返回值的函数)
例如:
var app = new Vue({
el:"#container",
data:{
msg:"hello,world"
},
computed:{
// 大写,计算属性一般是函数的形式写在Vue实例中的computed选项中的
uppercase:function(){
return this.msg.toUpperCase()//并终究要返回计算结果
},
greeting:{
get:function(){
return this.msg +" 你好,2018!"
},
set:function(){
alert(1)//计算属性的值改变的时候触发----changeCompu函数执行的时候
}
},
getOtherData:function(){
return app1.newMsg.length//数据来源于其他Vue实例
}
},
methods:{
upper:function(){
return this.msg.toUpperCase()
},
changeCompu:function(){
this.greeting = "heheh"//改变计算属性greeting的值,触发该计算属性set函数
}
}
})
计算属性和方法methods的区别
一般而言,计算属性能实现的通过methods中的函数也可以实现,那么他们之间有什么区别呢?
a).计算属性的值是基于他们的依赖进行更新的,只有在相关依赖发生变化的时候才会更新变化。
b).计算属性是有缓存的,只有相关依赖没有发生改变,多次访问计算属性的值的时候的值是之前缓存的计算结果(也就是第一次计算的结果),不会多次改变;而函数方法则是次次执行
所以,选计算属性还是函数取决于你是否需要缓存,当遇到需要进行大量计算的时候,首选计算属性(因为缓存可以做到只计算一次只要数据不更新)
var app = new Vue({
el:"#container",
data:{
msg:"hello,world"
},
computed:{
// 大写,计算属性一般是函数的形式写在Vue实例中的computed选项中的
uppercase:function(){
console.log(Date.now())
return this.msg.toUpperCase()//并终究要返回计算结果
}
},
methods:{
upper:function(){
console.log(Date.now())
return this.msg.toUpperCase()
}
}
})
setInterval(function(){
app.uppercase;//只打印一次,说明
app.upper()//次次都会有打印
},1000)
get和set
计算属性有两个选项分别是get函数和set函数;前者是获取当前计算属性的值,后者则是当计算属性的值发生改变的时候会触发;
set函数是通过改变计算属性的值触发的(也就是说当计算属性的值发生改变的时候才会触发set函数),在set函数中接受一个参数val作为改变后计算属性的值传递进来;
var app = new Vue({
el:"#container",
data:{
msg:"hello,world"
},
computed:{
greeting:{
get:function(){
return this.msg +" 你好,2018!"
},
set:function(){
alert(1)//计算属性的值改变的时候触发----changeCompu函数执行的时候
}
}
},
methods:{
changeCompu:function(){
this.greeting = "heheh"//改变计算属性greeting的值,触发该计算属性set函数
}
}
})