vue3中的watch

  1. 简单的监听:

    const number=ref(0)
    watch(number, (newValue, oldValue)=>{
    //
    })

2.复杂类型:

复制代码
const user=reactive({
    name:'test',
    age:18
})

// 整体监听
watch(user, (oldValue, newValue)=>{
    //
})
// 监听某一属性
watch(()=>user.name, (oldValue, newValue)=>{
})
  1. watch第三个参数

    watch( user, (oldValue, newValue)=>{
    },{ deep: true, immediate:true})
    // 深度监听, 子孙属性
    // 立即监听,初始化就执行一次

  2. 还可以使用watchEffect监听

    watchEffect(()=>{
    console.log('user',user)
    })

相关推荐
智算菩萨7 分钟前
实战:高级中文自然语言处理系统的Python设计与实现
前端·javascript·easyui
q_19132846959 分钟前
基于SpringBoot2+Vue2的诗词文化传播平台
vue.js·spring boot·mysql·程序员·计算机毕业设计
远山无期29 分钟前
解决Tailwind任意值滥用:规范化CSS开发体验
前端·css·eslint
用户542778485154038 分钟前
Vue 3 中开发高阶组件(HOC)与 Renderless 组件
前端
幼儿园老大1 小时前
告别代码屎山!UniApp + Vue3 自动化规范:ESLint 9+ 扁平化配置全指南
javascript·vue.js
HIT_Weston1 小时前
67、【Ubuntu】【Hugo】搭建私人博客(一)
前端·ubuntu·hugo
阿里巴啦1 小时前
用React+Three.js 做 3D Web版搭建三维交互场景:模型的可视化摆放与轻量交互
前端·react·three.js·模型可视化·web三维·web三维交互场景
daols881 小时前
vue 甘特图 vxe-gantt table 连接线的用法详解
vue.js·甘特图·vxe-table
Liu.7741 小时前
vue3组件之间传输数据
前端·javascript·vue.js
|晴 天|1 小时前
前端闭包:从概念到实战,解锁JavaScript高级技能
开发语言·前端·javascript