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)

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐