Vue3（监视器watch）

监视器(watch)是用来监视数据的变化,对数据进行监控定义监视器的俩种方式:

第一种：
           再Vue实例内部通过watch选项
           Vue.createApp({
               watch:{
                   变量:function(newValue,oldValue){},//监控方法
                   变量:{
                       handler:function(newValue,oldValue){},监控方法
                       deep:true,//开启深度监视
                       immediate:true//开启初始化触发
                   }
               }
           })
第二种：
通过Vue实例的$watch()方法
var unwatch = vm.$watch(变量,监控方法,[options]);//返回一个取消监视函数

具体操作：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./js/vue.js"></script></head><body><div id="app"><p>{{name}}</p><input type="text" v-model="name"/><p>{{ user.password }}</p><input type="text" v-model="user.password"></div><script>const vm=Vue.createApp({data(){return{name:'htt',user:{id:1001,username:admin,password:'123'}}},//方式一：通过watch选填watch:{name:function(newValue,oldValue){console.log('name被修改，原值：${oldValue},新值:${newValue}')},// //当user的passord变化的时候，可以监视出来// user:{//  handler:function(){//   },//    deep:true,//开启深度监视，当对象中的属性发生变化时也会监视//    immediate:true //立即触发// }'user.password':function(newValue,oldValue){console.log('user.password被修改，原值:${oldValue},新值:${newValue}')}}}).mount("#app")// //方式2监视普通属性和对象，但是对对象的某个属性无法监视let unwatch=vm.$watch('user',function(newValue){console.log('user被修改',newValue)//取消监视if(newValue.password==='000000'){unwatch()//回调函数，取消监视}},{deep:true,immediate:true})// 监视器(watch)是用来监视数据的变化,对数据进行监控定义监视器的俩种方式:// 再Vue实例内部通过watch选项// Vue.createApp({//     watch:{//       变量:function(newValue,oldValue){},//监控方法//       变量:{//          handler:function(newValue,oldValue){},监控方法//            deep:true,//开启深度监视//            immediate:true//开启初始化触发//       }//     }// })// 通过Vue实例的$watch()方法// var unwatch = vm.$watch(变量,监控方法,[options]);//返回一个取消监视函数</script></body>
</html>

Vue3（监视器watch）相关推荐

基于SpringBoot+EasyExcel+vue3实现excel表格的导入和导出
目录基于SpringBoot+EasyExcel+vue3实现excel表格的导入和导出一.导入和导出二.导出数据为excel实现过程三.将excel中的数据导入到数据库中基于SpringB ...
【Vue】新建一个Vue3项目
目录 1.新建vue项目 2.路径更改至新建的vue项目处 3.安装cnpm 4.cnpm安装vant3 5.安装babel-plugin 6.安装vue路由 7.安装axios 其他注意事项仅用于 ...
vue 后台返回的文件流进行预览_基于 Vue3+Ts 后台前端管理系统Vue3-Admin
今天再给大家分享一款超不错的Vue中后台管理系统Vue3Admin. vue3-admin 基于VueCli4+Ts+ElementUI构建的后台系统.采用组件化开发模式及Flex布局,支持移动端适配 ...
vue3.0环境搭建
安装最新版nodejs Node.jshttps://nodejs.org/zh-cn/安装过程非常傻瓜,一直下一步到完成 -------------------------------------- ...
libev源码解析——定时器监视器和组织形式
我们先看下定时器监视器的数据结构.(转载请指明出于breaksoftware的csdn博客) /* invoked after a specific time, repeatable (based o ...
libev源码解析——监视器（watcher）结构和组织形式
在<libev源码解析--总览>中,我们介绍了libev的一些重要变量在不同编译参数下的定义位置.由于这些变量在多线程下没有同步问题,所以我们将问题简化,所提到的变量都是线程内部独有的,不 ...
数据库开发基本操作-安装Sql Server 2005出现“性能监视器计数器要求”错误解决方法...
今天在安装SQL Server 2005时,出现"性能监视器计数器要求"错误,因为以前出现过这种错误,得到了解决.今天又又出现这种错误,但并不是很清楚当时的解决办法,所以这次把解决 ...
Linux桌面资源监视器,rsmo-linux下与桌面相嵌的系统资源监视器(转)
rsmo-linux下与桌面相嵌的系统资源监视器(转)[@more@] 今天安装了torsmo,感觉比GNOME等自带的系统监视器好.给人以精简.方便的感觉,而且嵌在桌面上,不用单独打开一个应用程序窗 ...
如何优雅的在 vue 中使用非响应式对象_一篇文章上手Vue3中新增的API
1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S/ ...

Vue3（监视器watch）

Vue3（监视器watch）相关推荐

最新文章

热门文章