在Vue3中，watch属性有以下几种情况
1、监听ref定义的属性，监听单个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script>
import {ref,reactive,watch} from 'vue'
export default {
setup(){
let sum=ref(0)
let msg=ref('你好啊')
const person=reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
watch(sum,(newValue,oldValue)=>{
console('sum变化了',newValue,oldValue)
})
return {
sum,
msg,
person
}
}
}
</script>
|
2、 监听ref定义的属性，监听多个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script>
import {ref,reactive,watch} from 'vue'
export default {
setup(){
let sum=ref(0)
let msg=ref('你好啊')
const person=reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
watch([sum,msg],(newValue,oldValue)=>{
console('sum或者msg变化了',newValue,oldValue)
})
return {
sum,
msg,
person
}
}
}
</script>
|
3、 监听reactive定义的一个响应式数据
注意：此处deep默认开启，并且无法关闭深度监听
注意：此处oldValue无法监听到，有问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script>
import {ref,reactive,watch} from 'vue'
export default {
setup(){
let sum=ref(0)
let msg=ref('你好啊')
const person=reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
watch(person,(newValue,oldValue)=>{
console.log('person发生变化了',newValue,oldValue)
},{immediate:true,deep:false})
// 开启了立即执行一次和禁用了深度监听
return {
sum,
msg,
person
}
}
}
</script>
|
4、监听reactive定义的一个响应式数据中的某个属性
注意：watch第一项不能直接写person.age,因为他需要是一个函数、一个ref定义的数据、或者一个reactive定义的数据
所以我们此处写为一个匿名的箭头函数，返回这个属性
他的oldvalue可以监听到
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script>
import {ref,reactive,watch} from 'vue'
export default {
setup(){
let sum=ref(0)
let msg=ref('你好啊')
const person=reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
watch(()=>person.age,(newValue,oldValue)=>{
console.log('person对象的age属性发生变化了',newValue,oldValue)
})
return {
sum,
msg,
person
}
}
}
</script>
|
5、 监听reactive定义的一个响应式数据中的某些属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script>
import {ref,reactive,watch} from 'vue'
export default {
setup(){
let sum=ref(0)
let msg=ref('你好啊')
const person=reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
console.log('person对象的age或者name属性发生变化了',newValue,oldValue)
})
return {
sum,
msg,
person
}
}
}
</script>
|
6、特殊情况，监听听reactive定义的一个响应式数据中的一个属性，并且这个属性也是一个对象
注意：此时的person的job属性是一个对象
这时deep是可以自己开启的，如果不开启监听不到其内变化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script>
import {ref,reactive,watch} from 'vue'
export default {
setup(){
let sum=ref(0)
let msg=ref('你好啊')
const person=reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person对象的age或者name属性发生变化了',newValue,oldValue)
},{deep:true})
return {
sum,
msg,
person
}
}
}
</script>
|
