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 通过base64实现图片下载功能
Dec 19 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue递归实现树形组件
Jul 15 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页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python中input与raw_input 之间的比较
2017/08/20 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
python 字符串常用函数详解
2019/09/11 Python
Myholidays美国:在线旅游网站
2019/08/16 全球购物
小学假期安全广播稿
2014/09/28 职场文书
2014年度培训工作总结
2014/11/27 职场文书
教师业务学习材料
2014/12/16 职场文书
初中信息技术教学计划
2015/01/22 职场文书
前台文员岗位职责
2015/02/04 职场文书
入党介绍人意见范文
2015/06/01 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python