Vue的computed计算属性监听不到数组或者对象属性的变化

PJ_

已于 2022-04-23 18:04:13 修改

阅读量1.2w

点赞数 5

分类专栏： vue 文章标签： vue.js

于 2022-04-23 17:38:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54257364/article/details/124367085

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

这篇博客探讨了Vue框架中响应式数据的原理，重点在于如何正确地改变数组和对象的元素以触发视图更新。文章指出，直接通过索引赋值或修改对象属性无法被Vue检测到，需要使用`Vue.set`或`Array.prototype.splice`方法来确保变化被追踪。同时，介绍了在computed属性中监听数据变化的解决策略，包括使用setter和getter确保数据的双向绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data里面是这样定义

arr:[],
obj:{}

在methods中的某个事件会改变数组/对象中的元素

clickBtn () {
　　this.arr[0] = false 或this.arr = [false]
}
//或者
clickBtn () {
　　this.obj = {
　　   test:12312
　　}
　　或
　　this.obj.test =12312
}

但在computed中监听不到这个数组中元素的变化

isAble() {
   //数组
　　if (this.arr[0]) {
　　　　return true;
　　} 
　　//或者
　　if (this.obj.test) {
　　　　return true;
　　} 
　//对象
　　if (this.obj.test) {
　　　　return true;
　　} 
　　//或者
　　if (this.obj) {
　　　　return true;
　　} 
}

解决办法就是在methods中这样写

methods: {
    clickBtn () {
　　    this.$set(this.arr, 0 ,false)或
　　    this.$set(this.obj, “test” ,12312)
    }
}

//或者
  computed: {
    testComData: {
      get() {
        return  //数组
　　        if (this.arr[0]) {
　　　　        return true;
　　        } 
　　        //或者
　　        if (this.obj.test) {
　　　　        return true;
　　        } 
　          //对象
　　        if (this.obj.test) {
　　　　        return true;
　　        } 
　　        //或者
　　        if (this.obj) {
　　　　        return true;
　　        } 
          },
      set(newVal) {
        this.$set(this.arr, 0 ,newVal)或
　　    this.$set(this.obj, “test” ,newVal)
      }
    }
  }

自己在vue的官方文档里computed这块，没有找到对应的解释。但是后来又找了下，发现其实是有相关的解释的：
对象：
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)

数组：
Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：
// Vue.set

Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice

vm.items.splice(indexOfItem, 1, newValue)