计算属性和监听器。
计算属性
1、计算属性的完整书写
计算属性是依赖于某个属性的,当依赖的属性值产生变化的时候计算属性也随之变化
计算属性是只读属性,它完整书写是有getter和setter两个属性,当依赖属性变化时会自动触发getter函数,当计算属性改变时会触发setter函数,原则上计算属性只有getter,没有setter。
data(){
return {
massage:"123"
}
},
computed:{
changeDate:{
set(){
// 当changeData变化时触发该函数
...
},
get(){
// 当massage值变化时自动触发函数
return this.massage
}
}
}
1、计算属性具有缓存功能,依赖值变化时触发getter函数,即便多次调用也只执行一次
2、计算属性是属性,并非方法,在template中可以直接引用该属性 {{changeDate}}
3、计算属性简写时写成一个函数,即getter函数,这也就是为什么计算属性是一个属性但是写成一个方法的原因
4、计算属性内的getter函数不允许进行异步操作和更改dom!!!计算属性最大的功能是计算值并返回值,减少因为复杂计算导致的性能消耗!需要进行异步操作或者更改dom的请使用监听器
computed:{
changeDate:function(){
// 相当于上面的get()函数
return this.massage
}
}
监听器
watch监听属性的变化,当属性变化时触发对应的函数,完整写法:
data(){
return {
massage:'123'}
},
watch:{
massage:{
handler(newValue,oldValue){
// 值变化时自动执行该函数
},
deep: true, // 是否开启深度监听 ,默认false
immediate: true // 在属性初始化的时候强制执行回调,默认 false
flush: 'post' // 是否在dom更新后执行函数
}
}
1、监听器内可以执行异步或者更改dom的操作
2、简易写法,简易写法的话,deep和immediate两个值都为默认值false
watch:{
massage:function(newValue,oldValue){
// 值变化执行
}
}
3、deep深度监听没有开启的情况下,无法监听对象属性的变化或者数组内容的变化
如果对一个对象开启深度监听,将会监听该对象所有的属性变化,极其耗费性能
data(){
return {
massage:{
name:"123",
age:18,
...
}
}
},
watch:{
massage:{
handler(newValue,oldValue){
// 值变化时自动执行该函数
},
deep: true, // 开启深度监听后,可以监听massage对象的所有属性值,如name,age...
}
}
如果只想监听对象的某一个属性值的变化,只需要写 “ . ”即可
data(){
return {
massage:{
name:"123",
age:18,
...
}
}
},
watch:{
“massage.name”:{
handler(newValue,oldValue){
// 值变化时自动执行该函数
},
deep: true, // 记得开启深度监听后,只监听name属性变化
}
}
4、当你更改了响应式状态,它可能会同时触发 Vue 组件更新和侦听器回调。默认情况下,用户创建的侦听器回调,都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: ‘post’ 选项
5、监听器的另一种使用方法this.$watch()
export default {
created() {
this.$watch('question', (newQuestion) => {
// ...
})
}
}
该方法有两个好处,一是可以在特定的条件下开启监听器,二是可以停止监听。
一般情况下,直到组件销毁才会停止监听,但是在特色情况下我们使用该方式进行监听,可以使用unwatch停止监听
const unwatch = this.$watch('foo', callback)
// ...当该侦听器不再需要时
unwatch()
监听器和计算属性的区别
1、监听器可以进行异步和dom的操作,计算属性不行
2、计算属性主要作用是对属性进行复杂计算时用于缓存计算值,只要依赖的值不变化,计算属性不会再次执行,而是直接返回上一次计算的结果,提高性能。
监听器主要时在监听值的变化并进行对应的操作。
他们俩对应的使用场景和使用方法都不一样,千万别混淆