Vue.js之监听器

星星该睡觉啦2025-08-05 14:08

watch侦听器：

作用:监视数据变化，执行一些业务逻辑或异步操作。语法:

简单写法→简单类型数据，直接监视
完整写法 → 添加额外配置项 (1)deep:true 对复杂类型深度监视

(2)immediate:true 初始化立刻执行一次handler方法

复制代码

//1.简单写法
data: {
    words :'苹果'，
    obj: {
    words:'苹果'
    }
},
watch:{
//该方法会在数据变化时，触发执行
数据属性名(newValue，oldValue){
一些业务逻辑 或 异步操作。
},
'对象.属性名'(newValue，oldValue){
一些业务逻辑 或 异步操作。
    }
}

复制代码

//2.完整写法
data:{
obj:{
    words:'苹果',
    kang: 'italy'
    },
},
watch:{// watch 完整写法
数据属性名:{
deep:true，//深度监视
handler(newValue){
console.log(newValue)
    }
  }
}