当前位置：主页 > 查看内容

vue3 watch和watchEffect的使用以及有哪些区别

发布时间：2021-04-30 00:00| 有 位朋友查看

简介：1.watch侦听器 引入watch import { ref, reactive, watch, toRefs } from 'vue' 对基本数据类型进行监听----- watch特性： 1.具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行 2.参数可以拿到当前值和原始值 3.可以侦听多个数……

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
 })

以上就是vue3 watch和watchEffect的使用以及有哪些区别的详细内容，更多关于vue3 watch和watchEffect的资料请关注站长技术其它相关文章！


原文链接：https://m.jb51.net/article/204827.htm
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：Node使用koa2实现一个简单JWT鉴权的方法 下一篇：vue实现轮播图帧率播放

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐