Vue.js之监听器

星星该睡觉啦

于 2025-08-04 08:19:48 发布

阅读量112

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/TwTei/article/details/149895006

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)
    }
  }
}