Vue3中watch的详解
Vue2使用watch
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
|
<template> <div>总合:{{ sum }}<button @click= "sum++" >点击累加</button></div> </template> <script> import { ref } from "vue" ; export default { // vue2中使用watch watch: { sum: { deep: true , handler(newValue, oldValue) { console.log( "总合 sum 变化:" , newValue, oldValue); }, }, }, setup() { let sum = ref(0); return { sum, }; }, }; </script> <style> </style> |
Vue3使用watch
watch有三个参数:
参数1:监听的参数
参数2:监听的回调函数
参数3:监听的配置(immediate)
情况1
监视ref所定义的一个响应式数据
1
2
3
|
<template> <div>总合:{{ sum }}<button @click= "sum++" >点击累加</button></div> </template> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 监视ref所定义的一个响应式数据 <script> import { ref, watch } from "vue" ; export default { setup() { let sum = ref(0); // 监视ref所定义的一个响应式数据 watch(sum, (newValue, oldValue) => { console.log( "sum ==> " , newValue, oldValue); }); return { sum, }; }, }; </script> |
情况2
监视ref所定义的多个响应式数据
1
2
3
4
5
6
7
8
|
<template> <div>总合:{{ sum }}<button @click= "sum++" >点击累加</button></div> <hr /> <div> msg:{{ msg }} <button @click= "msg += '~'" >改变msg</button> </div> </template> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script> import { ref, watch } from "vue" ; export default { setup() { let sum = ref(0); let msg = ref( "watch使用" ): // 情况2:监视ref所定义的多个响应式数据 watch([sum, msg], (newValue, oldValue) => { console.log( "sum/msg ==> " , newValue, oldValue); },{immediate: true }); return { sum, msg, }; }, }; </script> |
情况3
监视reactive所定义的一个响应式数据
注意:
- 这里无法正确获取oldValue
- 强制开启了深度监听(deep配置不生效)
1
2
3
4
5
6
7
8
9
|
<template> <div> <h3>情况3::监视reactive所定义的一个响应式数据</h3> <div>姓名:{{person.name}}</div> <div>年龄:{{person.age}}</div> <button @click= "person.name += '~'" >修改姓名</button> <button @click= "person.age ++" >修改年龄</button> </div> </template> |
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
|
<script> import { ref, watch,reactive } from "vue" ; export default { setup() { let person = reactive({ name: "lisa" , age: 18, job: { joblist: { money: 10, }, }, }); // 情况3、监视reactive所定义的一个响应式数据 /* 若watch监视的是reactive定义的响应式数据,则无法正确获得oldvalue! 若watch监视的是reactive定义的响应式数据,则强制开启了深度监视 */ watch(person,(newValue, oldValue) => { console.log( "person ==> " , newValue, oldValue); },{immediate: true ,deep: false } //这里的deep配置不再奏效 ); return { person, }; }, }; </script> |
情况4
监视reactive所定义的一个响应式数据中的某个属性
1
2
3
4
5
6
7
8
9
|
<template> <div> <h3>情况4::监视reactive所定义的一个响应式数据中的某个属性</h3> <div>姓名:{{person.name}}</div> <div>年龄:{{person.age}}</div> <button @click= "person.name += '~'" >修改姓名</button> <button @click= "person.age ++" >修改年龄</button> </div> </template> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<script> import { ref, watch,reactive } from "vue" ; export default { setup() { let person = reactive({ name: "lisa" , age: 18, job: { joblist: { money: 10, }, }, }); // 情况4、监视reactive所定义的一个响应式数据中的某个属性 watch(()=>person.name,(newValue, oldValue) => { console.log( "person.name ==> " , newValue, oldValue); }); return { person, }; }, }; </script> |
情况5
监视reactive所定义的一个响应式数据中的某些属性
1
2
3
4
5
6
7
8
9
|
<template> <div> <h3>情况4::监视reactive所定义的一个响应式数据中的某个属性</h3> <div>姓名:{{person.name}}</div> <div>年龄:{{person.age}}</div> <button @click= "person.name += '~'" >修改姓名</button> <button @click= "person.age ++" >修改年龄</button> </div> </template> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<script> import { ref, watch,reactive } from "vue" ; export default { setup() { let person = reactive({ name: "lisa" , age: 18, job: { joblist: { money: 10, }, }, }); // 情况5、监视reactive所定义的一个响应式数据中的某些属性 watch([()=>person.name,()=>person.age],(newValue, oldValue) => { console.log( "person.name/person.age ==> " , newValue, oldValue); }); return { person, }; }, }; </script> |
特殊情况
watch监听reactive中对象的嵌套对象
1
2
3
4
5
6
7
8
9
10
|
<template> <div> <div>姓名:{{person.name}}</div> <div>年龄:{{person.age}}</div> <div>薪资:{{person.job.joblist.money}} K</div> <button @click= "person.name += '~'" >修改姓名</button> <button @click= "person.age ++" >修改年龄</button> <button @click= "person.job.joblist.money ++" >提薪</button> </div> </template> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<script> import { ref, watch,reactive } from "vue" ; export default { setup() { let person = reactive({ name: "lisa" , age: 18, job: { joblist: { money: 10, }, }, }); // 特殊情况、监视reactive所定义嵌套对象 watch(()=>person.job,(newValue, oldValue) => { console.log( "person.job对象发生变化 ==> " , newValue, oldValue); },{deep: true }); //此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效 return { person, }; }, }; </script> |
相关文章
-
扫码下载安卓APP
-
微信扫一扫关注我们
微信扫一扫打开小程序
手Q扫一扫打开小程序
-
返回顶部
友情链接:
6547题库网 |
Scratch从入门到精通|
Copyright © 小码农 |
2020-2022
发表评论