当前位置: 首页 > news >正文

watch监听vue2与vue3的写法

watch的属性值

handler:回调函数, 即监听到变化时应该执行的函数,可以是单独的函数或带有 immediate 和 deep 属性的对象watch: {someProperty: function(newVal, oldVal) {// 处理逻辑}}deep: 其值是true或false, 当属性值是对象或数组时,深度观察会监控对象内部所有层级的变化。watch: {someObject: {handler(newVal, oldVal) {// 处理逻辑},deep: true}}immediate: 值是true或false,首次绑定时立即执行回调函数watch: {someProperty: {handler(newVal, oldVal) {// 处理逻辑},immediate: true}}

vue2写法:

//基本用法watch:{avatar(navl,oval){console.log(navl,'navl');console.log(oval,'oval');}},
//深度监听 
watch: {user: {handler(nval,oval) {console.log(nval,oval);},deep: true,}},
//立即执行
watch: {user: {handler(nval,oval) {console.log(nval,oval);},immediate: true}},
//观察数组中特定项的变化watch: {'user[0]': function(newVal, oldVal) {console.log('user[0] changed from', oldVal, 'to', newVal);}
//监听多个数据源watch: {property1(newVal, oldVal) {console.log('property1 changed from', oldVal, 'to', newVal);},property2(newVal, oldVal) {console.log('property2 changed from', oldVal, 'to', newVal);}}

vue3写法:

import { watch } from 'vue';
//基本用法
watch(avatar, (newVal, oldVal) => {console.log('avatarchanged from', oldVal, 'to', newVal);
});//深度管察
watch(() => user,(nval,oval) => {console.log(val, oval)},{ deep:true },
)//立即执行
watch(() => user,(nval,oval) => {console.log(val, oval)},{ immediate: true },
)//使用回调函数对象
watch(someProperty,{handler(newVal, oldVal) {console.log('someProperty changed from', oldVal, 'to', newVal);},immediate: true,deep: true});

http://www.lryc.cn/news/404120.html

相关文章:

  • docker搭建普罗米修斯监控gpu
  • 像 MvvmLight 一样使用 CommunityToolkit.Mvvm 工具包
  • python入门课程Pro(2)--循环
  • 今日总结:雪花算法,拉取在线用户
  • 前瞻断言与后瞻断言:JavaScript 正则表达式的秘密武器
  • 昇思MindSpore学习总结十六 —— 基于MindSpore的GPT2文本摘要
  • React Router 6笔记
  • Android init 中的wait_for_property指令
  • 智能合约语言(eDSL)—— 并行化方案——调度算法
  • vue2.0中如何实现数据监听
  • kafka开启kerberos和ACL
  • QT+winodow 代码适配调试总结(三)
  • Linux之旅:常用的指令,热键和权限管理
  • 简单实用的企业舆情安全解决方案
  • 【中项】系统集成项目管理工程师-第2章 信息技术发展-2.1信息技术及其发展-2.1.1计算机软硬件与2.1.2计算机网络
  • SpringBoot集成Sharding-JDBC-5.3.0实现按月动态建表分表
  • ubuntu 上安装中文输入法
  • Postman导出excel文件
  • 你还在手动构建Python项目吗?PyBuilder让一切自动化!
  • WebRTC音视频-前言介绍
  • centos/rocky容器中安装xfce、xrdp记录
  • 实战:Eureka的概念作用以及用法详解
  • jupyter_contrib_nbextensions安装失败问题
  • 设计模式-Git-其他
  • 【C#】计算两条直线的交点坐标
  • 在项目服务器部署git 并实现自动提交
  • 前缀匹配工具之IP-Prefix
  • 等级保护测评案例分享及合规建议
  • GOLLIE : ANNOTATION GUIDELINES IMPROVE ZERO-SHOT INFORMATION-EXTRACTION
  • 2024-07-19 Unity插件 Odin Inspector9 —— Validation Attributes