watch监听vue2与vue3的写法

watch的属性值

TypeScript 复制代码
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写法:

TypeScript 复制代码
//基本用法
  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写法:

TypeScript 复制代码
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
      }
    );
相关推荐
zhanshuo28 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang29 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
讨厌吃蛋黄酥29 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil31 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录38 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672238 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少43 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
1234Wu1 小时前
React Native 接入 eCharts
javascript·react native·react.js
abigale033 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle