1、说明
在Vue中我们经常会使用到多个参数计算出来的结果,在这种情况下我们可以定义参数和方法,将处理结果赋值给自定义参数,这种方式较为复杂,由此vue提供了计算属性方法。面对响应式页面,我们为了做到实时响应页面参数变化,可以使用vue中的watch属性。
2、计算属性
2.1、计算属性的定义方式-以方法方式
注:这种方式可以计算得到属性值,但是不能做到双向绑定。
// { [key: string]: Function | { get: Function, set: Function } }
export default{
data(){
return {}
},
computed:{
// 方法名就是计算得到的参数名,使用 {{res}} 引用
res(){
}
}
}
2.2、计算属性的定义方式-使用set/get方式
注:可以读取和设置计算属性。
// { [key: string]: Function | { get: Function, set: Function } }
export default{
data(){
return {
test: 2
}
},
computed:{
// 方法名就是计算得到的参数名,使用 {{res}} 引用
res:{
get(){
return this.test + 1
},
set(val){ // val是当前的值
this.test = val + 1
}
}
}
}
3、监听属性
3.1、浅监听(适用于基础类型的参数)
export default{
data(){
return {
test: 2
}
},
watch:{
// test就是监听参数
test(val, oldVal){
// 此处监听test参数,新值和旧值
}
}
}
3.2、深监听(适用于嵌套对象)
export default{
data(){
return {
test: 2
}
},
watch:{
// test就是待监听参数
test:{
handler(val, oldVal) { /* ... */ },
deep: true,
immediate:true // 首次绑定也执行handler
}
}
}
4、总结
本文介绍了计算属性和监听属性的使用,在此需要特别注意的是计算属性一定要加返回值。