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下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
Vue Element plus使用方法梳理
Dec 24 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中的 == 运算符进行字符串比较
2006/11/26 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
Python+Django搭建自己的blog网站
2018/03/13 Python
Python返回数组/List长度的实例
2018/06/23 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
C语言50道问题
2014/10/23 面试题
Python里面search()和match()的区别
2016/09/21 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
爱心募捐通知范文
2015/04/27 职场文书
童年读书笔记
2015/06/26 职场文书
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers