uni-app app端 子组件watch监听不到数据变化

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app app端 子组件watch监听不到数据变化

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.36

手机系统：Android

手机系统版本号：Android 9.0

手机机型：模拟器

页面类型：vue

vue版本：vue2

打包方式：云端

操作步骤：

watch: {  
    rank: {  
        handler: 'updateLocalData',  
        deep: true  
    }  
},  
methods:{  
    updateLocalData(){}  
 }

预期结果：

执行updateLocalData方法

实际结果：

watch失效

bug描述：

在小程序调试中是没有任何问题，app端就会有这个问题

Harmonyos Next教程
2 回复

直接这么写不就好了 watch: {
rank: {
handler() {

    },    
    deep: true    
}

},


在uni-app开发过程中，确实有时会遇到子组件中watch监听不到数据变化的问题。这通常与数据传递和响应式系统的特性有关。以下是一些可能导致这种情况的原因及对应的代码案例，帮助你排查和解决问题。

1. 数据传递方式

确保数据是通过props正确传递到子组件的。如果数据是通过非响应式方式（如直接操作对象属性而非替换整个对象）更新的，watch可能无法触发。

父组件代码：

<template>
  <ChildComponent :data="childData" />
</template>

<script>
export default {
  data() {
    return {
      childData: {
        value: 1
      }
    };
  },
  methods: {
    updateData() {
      // 正确方式：替换整个对象
      this.childData = { ...this.childData, value: 2 };
      // 错误方式：直接修改属性（可能导致子组件watch不触发）
      // this.childData.value = 2;
    }
  }
};
</script>

子组件代码：

<script>
export default {
  props: ['data'],
  watch: {
    data: {
      handler(newVal, oldVal) {
        console.log('Data changed:', newVal, oldVal);
      },
      deep: true // 如果data是对象，需要开启深度监听
    }
  }
};
</script>

2. 确保数据是响应式的

如果数据是在组件创建后动态添加的，确保它是响应式的。Vue 2.x中，可以使用Vue.set或this.$set来确保新添加的属性是响应式的。

示例：

<script>
export default {
  data() {
    return {
      user: {}
    };
  },
  methods: {
    addUserName() {
      this.$set(this.user, 'name', 'John Doe'); // 确保name是响应式的
    }
  }
};
</script>

3. 深度监听对象

如果监听的对象内部嵌套了其他对象，需要设置deep: true来深度监听对象内部属性的变化。

示例（已在上面的子组件代码中展示）：

watch: {
  data: {
    handler(newVal, oldVal) {
      console.log('Data changed:', newVal, oldVal);
    },
    deep: true
  }
}

总结

确保数据通过props正确传递，并且使用响应式的方式来更新数据。如果监听的是对象，考虑使用deep: true进行深度监听。同时，注意避免直接修改对象属性，而是应该替换整个对象或使用Vue.set/this.$set来添加新属性。以上方法应该能帮助你解决uni-app中子组件watch监听不到数据变化的问题。

回到顶部