1.watch侦听器
引入watch
|
1
|
import { ref, reactive, watch, toRefs } from 'vue' |
对基本数据类型进行监听----- watch特性：
1.具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行
2.参数可以拿到当前值和原始值
3.可以侦听多个数据的变化，用一个侦听起承载
|
1
2
3
4
5
6
7
|
setup() { const name = ref('leilei') watch(name, (curVal, prevVal) => { console.log(curVal, prevVal) })}template: `Name: <input v-model="name" />` |
对引用类型进行监听-----
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
setup() { const nameObj = reactive({name: 'leilei', englishName: 'bob'}) 监听一个数据 watch(() => nameObj.name, (curVal, prevVal) => { console.log(curVal, prevVal) }) 监听多个数据 watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, '----', prevName, curEng) setTimeout(() => { stop1() }, 5000) }) const { name, englishName } = toRefs(nameObj)}template: `Name: <input v-model="name" /> englishName: <input v-model="englishName" />` |
2.watchEffect
没有过多的参数 只有一个回调函数
1.立即执行，没有惰性，页面的首次加载就会执行。
2.自动检测内部代码，代码中有依赖 便会执行
3.不需要传递要侦听的内容 会自动感知代码依赖，不需要传递很多参数，只要传递一个回调函数
4.不能获取之前数据的值 只能获取当前值
5.一些=异步的操作放在这里会更加合适
|
1
2
3
|
watchEffect(() => { console.log(nameObj.name) }) |
侦听器的取消 watch 取消侦听器用法相同
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const stop = watchEffect(() => { console.log(nameObj.name) setTimeout(() => { stop() }, 5000)})const stop1 = watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, '----', prevName, curEng) setTimeout(() => { stop1() }, 5000) }) |
watch也可以变为非惰性的 立即执行的 添加第三个参数 immediate: true
|
1
2
3
4
5
6
7
8
|
watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, '----', prevName, curEng) setTimeout(() => { stop1() }, 5000)}, { immediate: true}) |
以上就是vue3 watch和watchEffect的使用以及有哪些区别的详细内容，更多关于vue3 watch和watchEffect的资料请关注服务器之家其它相关文章！
原文链接：https://juejin.cn/post/6921581792507985927
