Vue 组件内porps的type为数组时,第一次不触发更新watch

Vue watch

  • Vue 组件内porps的type为数组时,第一次不触发更新watch

addItems:{
      immediate: true, // immediate选项可以开启首次赋值监听
      // deep  是否开启深度监听,监听对象内部属性变化时用
      handler (newV, oldV) {
      }
}

 

### Vue2 中深度监听对象属性变化的解决方案 当遇到 Vue2 无法监听到对象内部属性值变化的情况,可以采用多种方式来解决问题。 对于对象新增或删除属性导致深度监听失效的问题,在父组件中可以通过 `Object.assign` 来重新赋值对象,从而触发组件内的深度监听机制[^2]。具体实现如下: ```javascript // 父组件代码片段 data () { return { obj: { status: 0 } }; }, mounted () { setTimeout(() => { this.obj.refresh = 'refresh'; this.obj = Object.assign({}, this.obj); // 解决深度监听中失效的问题 }); } ``` 另一种有效的方式是在需要添加新属性的情况下使用 `Vue.set()` 方法,这能确保新加入的数据成为响应式的一部分[^3]。例如: ```javascript this.$set(this.someObject, 'newProperty', value); ``` 此外,针对 Vuex 的状态管理库中存在的类似问题,通过完全替换整个对象来进行更新是一个可行的办法,这样仅可以成功更改 state 内部的对象值,还能让 getters 自动反映这些变更[^4]。 最后一种方法涉及利用计算属性转换目标对象为数组形式再进行监听,这种方法能够绕过某些情况下直接监听复杂结构带来的挑战[^5]。下面展示了如何应用此技巧: ```javascript computed: { cachesFormSele(){ return JSON.parse(JSON.stringify(this.aaa)); } }, watch: { cachesFormSele: { handler(newValue, oldValue){ if (newValue.statncd !== oldValue.statncd) { this.aaa.queryChange = 1; } console.log('监听新页面数据的变化:', newValue); console.log('监听旧页面数据的变化:', oldValue); }, deep: true } } ``` 以上几种策略可以根据实际应用场景灵活选用,以达到理想的监听效果并保持应用程序的良好性能表现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值