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中computed和watch有哪些区别
Dec 19 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
深入分析PHP设计模式
2020/06/15 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
如何在Python中编写并发程序
2016/02/27 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python脚本开机自启的实现方法
2019/06/28 Python
python 回溯法模板详解
2020/02/26 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
个人工作主要事迹
2014/05/08 职场文书
公关活动策划方案
2014/05/25 职场文书
迎新晚会策划方案
2014/06/13 职场文书
护士节活动总结
2014/08/29 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
教师求职自荐信范文
2015/03/04 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
python中的getter与setter你了解吗
2022/03/24 Python