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


Posted in Vue.js onJanuary 26, 2021

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的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue实现轮播图帧率播放
Jan 26 #Vue.js
vue 组件基础知识总结
Jan 26 #Vue.js
深入了解Vue动态组件和异步组件
Jan 26 #Vue.js
如何在 Vue 表单中处理图片
Jan 26 #Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 #Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 #Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
You might like
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python 第一步 hello world
2009/09/25 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python实现弹跳小球
2019/05/13 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
大学毕业生工作的自我评价
2013/10/01 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
初二数学教学反思
2016/02/17 职场文书