计算属性(computed)
我们需要对数据进行一些处理后再展示这个时候就可以用到computed。当然模板中也可以处理,但是可读性差,且不好维护。
如下: 对已知数组转换特定字符串
<!-- <div id="app">{{arr.join('-')}}</div> --> // 模板中处理
<div id="app">{{str}}</div> // 直接引用computed中的str
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5],
},
computed: {
str() {
return this.arr.join('-')
}
}
})
</script>
计算属性的getter和setter
一般的时候,我们都是用getter来读取数据,然后返回处理后的数据。
以下是setter的调用
<script>
const vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5],
},
computed: {
str: {
get() {
return this.arr.join('-')
},
set(newValue) {
let temp = newValue + 'abc'
console.log(temp) // abc
}
}
}
})
vm.str = '' // 触发 set()
</script>
监听属性(watch)
当有某些数据需要随着某个数据变动而变动时,可以使用watch
watch的基本用法
const vm = new Vue({
el: '#app',
data: {
name: '123',
},
watch: {
name(newVal, oldVal) {
console.log(newVal) // abc
console.log(oldVal) // 123
}
},
created() {
this.name = 'abc'
}
})
handler方法和immediate属性
watch第一次绑定的时候,不会执行监听函数。如果需要最初绑定值的时候也执行函数,则需要用到immediate属性。
const vm = new Vue({
el: '#app',
data: {
name: '123',
},
watch: {
name: {
handler(newVal, oldVal) {
console.log(newVal) // 123
console.log(oldVal) // undefined
},
immediate: true
}
},
created() {
// this.name = 'abc'
}
})
handler函数与计算属性中的get()函数一样基本使用情况下可以省略。
immediate:true表示立即先去执行handler方法。
deep深度监听
如果监听是第一个对象,当对象的属性改变时,会发现无法监听到。这个时候就需要deep属性对其深度监听
const vm = new Vue({
el: '#app',
data: {
student: {
name: 'xiaoA',
age: 15
},
},
watch: {
student: {
handler(newVal, oldVal) {
console.log(newVal) // {name: 'xiaoA',age:18}
console.log(oldVal) // {name: 'xiaoA',age:18}
},
deep: true,
},
},
created() {
this.student.age = 18 // 触发监听
}
如果只是监听对象中某个属性,可以简写如下
watch: {
'student.age'(newVal, oldVal) {
console.log(newVal) // 18
console.log(oldVal) // 15
},
},
监听整个对象时候发现已经可以监听到对象属性值的变化,但是newVal与oldVal值是一致的。是因为他们的引用指向的是同一个地址。
优化如下
computed: {
tempAge() {
return JSON.parse(JSON.stringify(this.student.age))
}
},
watch: {
tempAge: {
handler(newVal, oldVal) {
console.log(newVal) // 18
console.log(oldVal) // 15
},
deep: true
}
},
总结
1,computed与watch都能实现相同的功能
2,computed支持缓存,可以避免多次无意义的重新计算,可提高性能
3,watch支持异步,computed不支持
4,使用场景:
computed是一个返回的数据受一个或多个数据影响(一对一或多对一)
watch是一个监听值改变时,处理其他数据 (一对多)
执行异步操作或开销较大的操作时使用watch