Vue监视属性变化watch

在 Vue.js 中,watch 选项用于观察 Vue 实例的数据变化,并在数据变化时执行相应的回调函数。它特别适用于你需要在数据变化时执行异步或开销较大的操作的场景。watch 可以监听数据属性、计算属性的变化,也可以对深层嵌套的数据进行监听。

基本语法

watch: {
   
   
  // 监听单一数据属性
  propertyName(newValue, oldValue) {
   
   
    // 数据变化时执行的逻辑
    console.log(`属性值从 ${
     
     oldValue} 变为 ${
     
     newValue}
Vue.js 中,监视属性watchers)用于观察 Vue 实例中的数据变动,当需要在数据变化时执行异步或开销较大的操作时适用。而深度监听则是监视属性的一种特殊应用场景,用于监听对象内部所有属性变化。 正常情况下,监视属性只能监听对象的一层属性变化。例如,如果要监听对象 `number` 下面的一个属性,普通写法可以满足需求,但如果需要监听 `number` 下面的所有属性,就需要用到深度监听,通过设置 `deep: true` 来开启 [^4]。 深度监听的使用方法如下: ### 正常写法 在 `new Vue` 时传入 `watch` 配置: ```javascript new Vue({ data: { number: { prop1: 1, prop2: 2 } }, watch: { number: { immediate: true, // 初始化的时候让 handler 调用一下 deep: true, // 开启深度监听 handler(newValue, oldValue) { console.log('number 发生改变了'); console.log(`新值为`, newValue); console.log(`旧值为`, oldValue); } } } }); ``` 上述代码中,`immediate: true` 表示在初始化时就调用 `handler` 函数,`deep: true` 开启了深度监听,这样当 `number` 对象内部的任何属性发生变化时,`handler` 函数都会被调用 [^4][^5]。 ### 另一种写法 通过 `vm.$watch` 方法进行监视: ```javascript const vm = new Vue({ data: { isHot: false } }); vm.$watch('isHot', { immediate: true, deep: true, handler(newValue, oldValue) { console.log('isHot 被修改了', newValue, oldValue); } }); ``` 这种方式同样可以实现深度监听,当 `isHot` 发生变化时,`handler` 函数会被触发 [^2][^5]。 ### 简写方法 ```javascript watch: { number(newValue, oldValue) { console.log('number 发生改变了'); console.log(`新值为`, newValue); console.log(`旧值为`, oldValue); } } ``` 不过这种简写方法默认没有开启深度监听,如果需要深度监听,还是要使用完整的写法并设置 `deep: true` [^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值