vue3 watch和watchEffect的使用以及有哪些区别
作者:静女 时间:2024-05-05 09:11:09
1.watch *
引入watch
import { ref, reactive, watch, toRefs } from 'vue'
对基本数据类型进行监听----- watch特性:
1.具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行
2.参数可以拿到当前值和原始值
3.可以侦听多个数据的变化,用一个侦听起承载
setup() {
const name = ref('leilei')
watch(name, (curVal, prevVal) => {
console.log(curVal, prevVal)
})
}
template: `Name: <input v-model="name" />`
对引用类型进行监听-----
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.一些=异步的操作放在这里会更加合适
watchEffect(() => {
console.log(nameObj.name)
})
* 的取消 watch 取消 * 用法相同
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
watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
console.log(curName, curEng, '----', prevName, curEng)
setTimeout(() => {
stop1()
}, 5000)
}, {
immediate: true
})
来源:https://juejin.cn/post/6921581792507985927
标签:vue3,watch,watchEffect
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python钉钉机器人运维脚本监控实例
2022-08-23 22:19:48
![](https://img.aspxhome.com/file/2023/5/81855_0s.jpg)
Python实现小数转化为百分数的格式化输出方法示例
2023-07-15 05:58:15
python3使用python-redis-lock解决并发计算问题
2021-05-09 16:04:18
![](https://img.aspxhome.com/file/2023/3/95323_0s.png)
MySQL按照汉字的拼音排序简单实例
2024-01-22 00:32:41
c#使用FreeSql生产环境时自动升级备份数据库
2024-01-22 15:56:01
邮箱正则表达式实现代码(针对php)
2024-05-03 15:48:55
Python实现针对中文排序的方法
2022-04-20 23:21:51
DB2和 Oracle的并发控制(锁)的比较
2009-02-28 10:29:00
用Dreamweaver设计限时自动关闭网页
2009-07-10 13:13:00
![](https://img.aspxhome.com/file/UploadPic/20072/200723113358457s.jpg)
hadoop迁移数据应用实例详解
2022-12-28 01:29:45
![](https://img.aspxhome.com/file/2023/3/112083_0s.jpg)
详解MySQL的sql_mode查询与设置
2024-01-14 08:30:20
Pycharm生成可执行文件.exe的实现方法
2023-07-19 12:09:54
![](https://img.aspxhome.com/file/2023/3/64273_0s.jpg)
IPython 8.0 Python 命令行交互工具
2022-10-24 09:17:54
![](https://img.aspxhome.com/file/2023/0/87720_0s.png)
非常详细的SQL--JOIN之完全用法
2024-01-17 11:59:19
PyQt5实现简单数据标注工具
2021-10-24 04:55:54
![](https://img.aspxhome.com/file/2023/9/97419_0s.jpg)
python爬取微博评论的实例讲解
2022-01-10 19:53:14
很全面的MySQL处理重复数据代码
2024-01-24 14:26:45
使用Protocol Buffers的C语言拓展提速Python程序的示例
2022-12-04 08:46:20
MySQL load语句详细介绍
2024-01-27 01:31:05
ASP ,IP地址分段计算
2008-04-13 06:55:00