首页 > 其他分享 >Vue3中watch监听写法

Vue3中watch监听写法

时间:2023-05-17 21:37:01浏览次数:47  
标签:count reactive watch newVal oldVal Vue3 监听


侦听ref和reactive

const state = reactive({
	count: 0
})

// 侦听reactive中属性,需要包裹在箭头函数中
watch(() => state.count, (newVal, oldVal) => {
	
})

// watch直接接受ref作为监听对象,并且在回调函数返回解包后的值
const count = ref(0);
watch(count, (newVal, oldVal) => {
	
})

// 监听props上属性的变化
watch(() => props.msg, (newVal, oldVal) => {
	console.log(newVal, oldVal);
})


标签:count,reactive,watch,newVal,oldVal,Vue3,监听
From: https://www.cnblogs.com/openmind-ink/p/17410329.html

相关文章

  • 记录--vue3优雅的使用element-plus的dialog
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助如何优雅的基于element-plus,封装一个梦中情dialog优点摆脱繁琐的visible的命名,以及反复的重复dom。想法将dialog封装成一个函数就能唤起的组件。如下:addDialog({title:"测试",//弹窗名compone......
  • Stopwatch 类来测量时间间隔
    使用Stopwatch类来测量时间间隔。以下是一个示例代码,展示如何记录Excel导入的用时:'创建Stopwatch实例DimstopwatchAsNewStopwatch()'开始计时stopwatch.Start()'执行Excel导入操作'...'停止计时stopwatch.Stop()'获取经过的时间DimelapsedTime......
  • 直播商城源码,Android实现监听Settings值变化的功能
    直播商城源码,Android实现监听Settings值变化的功能先创建一个内部类继承自ContentObserver   classSettingsContentObserverextendsContentObserver{    publicSettingsContentObserver(){      super(newHandler());    }    ......
  • 企业级项目模板的配置与集成(Vite + Vue3 + TypeScript)
    企业级项目模板的配置与集成(Vite+Vue3+TypeScript)1、项目介绍项目使用:eslint+stylelint+prettier来对我们代码质量做检测和修复。需要使用husky来做commit拦截需要使用commitlint来统一提交规范需要使用preinstall来统一包管理工具。2、环境准备nodev16.14.2pnp......
  • IP网络中的合法监听技术
    127.0.0.1:回环地址。该地址指电脑本身,主要预留测试本机的TCP/IP协议是否正常。只要使用这个地址发送数据,则数据包不会出现在网络传输过程中。10.x.x.x、172.16.x.x~172.31.x.x、192.168.x.x:这些地址被用做内网中。用做私网地址,这些地址不与外网相连。255.255.255.255:广播地址0.0......
  • Vue3.3 的新功能的一些体验
    Vue3在大版本3.3里面推出来了一些新功能(主要是语法糖),网上有各种文章,但是看起来似乎是一样的。我觉得吧,有新特性了,不能光看,还要动手尝试一下。DefineOptions宏定义先来一个简单的,以前我们有时候想设个name,有时候不想让组件自动继承属性,这时候需要单独设置一个script进行设......
  • 从0到1搭建后台管理系统(Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Rou
    参考有来:https://www.cnblogs.com/haoxianrui/p/17331952.htmlNode16+版本大于16【问题一:目前我是14.18.2的版本npm是6.14.15版本,这就涉及到要切换node版本的问题,不然我安装了16我的vue2项目就启动不了了】vscode插件市场搜索 VueLanguageFeatures(Volar) 和 TypeScript......
  • vue3 页面打印 vue3-print-nb
    页面打印效果图:之前使用vue2用的是vue-print-nb现在项目是vue3组件用的是vue3-print-nb使用方法安装npmivue3-print-nb--save或者yarnaddvue3-print-nb在main.js中引入import{createApp}from"vue";importAppfrom"./App.vue";importprintf......
  • element-plus + VUE3 项目 build 之后 el-cascader无法选中而且导致整个网页卡顿
    cascader不能用v-model接收值,需要改为model-value方式<el-cascadermodel-value="selRegion":options="RegionTreeCascader":show-all-levels="true"separator="-":props="{checkStrictly:true,expandTrigger:'hove......
  • 4、zookeeper的java三种客户端介绍-Curator(crud、事务操作、监听、分布式计数器、分布
    目录Zookeeper系列文章目录一、zookeeper原生JavaAPI二、ZkClient三、Apachecurator1、pom.xml2、定义常量类3、连接实例化4、事务操作示例5、CRUD示例6、监听示例7、计数器示例1)、单机原子自增性实现1、Synchronized示例2、Lock示例3、AtomicInteger示例2)、分布式线程安全原子......