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 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
JS实现复制功能
2017/03/01 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
pandas实现导出数据的四种方式
2020/12/13 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
缓刑人员思想汇报
2014/10/11 职场文书
离职报告格式
2014/11/04 职场文书
工会经费申请报告
2015/05/15 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
Elasticsearch 基本查询和组合查询
2022/04/19 Python