Vue报错：无法正确使用$set方法更新嵌套属性，如何解决？-猿码集

Vue报错：无法正确使用$set方法更新嵌套属性，如何解决？

在Vue中，我们常常使用$set方法来动态更新数据，以达到实时更新视图的效果。但是，在嵌套属性的情况下，有时会出现无法更新的问题。下面将介绍该问题的原因及解决方案。

1. 嵌套属性的更新

在Vue中，我们经常使用响应式数据来更新视图，例如：


data () {
  return {
    obj: {
      name: '张三'
    }
  }
},
mounted () {
  this.obj.name = '李四'
}

上述代码中，我们定义了一个对象obj，其中包含一个name属性，并将其设置为“张三”。在mounted生命周期函数中，我们将obj的name属性更新为“李四”。这时候，我们会发现视图被成功更新了，这是因为Vue会将该对象转化为响应式数据，从而实现实时更新视图的效果。

但是，当我们将对象嵌套在另一个对象中时，上述代码就无法正常工作了，例如：


data () {
  return {
    obj: {
      info: {
        name: '张三'
      }
    }
  }
},
mounted () {
  this.obj.info.name = '李四'
}

上述代码中，我们将info对象嵌套在了obj对象中，并将其设置为响应式数据。在mounted生命周期函数中，我们尝试将info对象的name属性更新为“李四”。但是，这时候我们会发现视图并没有更新。

2. 问题的原因

为什么将对象嵌套在另一个对象中时，$set方法无法正常更新呢？原因在于Vue的响应式系统设计原则：Object.freeze()是不响应式的。

Object.freeze()是一个JavaScript的原生方法，它可以冻结一个对象，使其不能被修改。如果我们将一个被Object.freeze()方法冻结的对象转化为响应式数据，那么该对象就无法被动态更新了，因为它已经被冻结了。

Vue在处理响应式数据时，会遍历该对象及其属性，为每个属性添加getter和setter监听器。但是，当该对象被冻结时，这些监听器就不再起作用了，导致无法实现动态更新。

3. 解决方案

既然Object.freeze()是导致$set方法无法正常更新的原因，那么解决方案就很简单了：将对象解冻。

Vue提供了一个全局方法Vue.set()，它与$set方法的作用相同，可以用来更新嵌套属性。该方法需要传入三个参数：要更新的对象、属性名及新的属性值。在使用Vue.set()方法之前，我们需要判断该对象是否被冻结，如果是，则需要先将其解冻。


data () {
  return {
    obj: Object.freeze({
      info: {
        name: '张三'
      }
    })
  }
},
mounted () {
  let obj = this.obj
  // 判断对象是否被冻结
  if (Object.isFrozen(obj)) {
    // 克隆对象并解冻
    obj = Object.assign({}, obj)
    Vue.set(this, 'obj', obj)
  }
  // 更新对象属性
  Vue.set(obj.info, 'name', '李四')
}

上述代码中，我们首先将obj对象使用Object.freeze()方法冻结了，然后在mounted生命周期函数中，判断了该对象是否被冻结。若是，则将其克隆并解冻，这样就可以使用$set方法更新嵌套属性了。

4. 总结

在Vue中，当我们需要更新嵌套属性时，可能会出现$set方法无法正确工作的情况。这是因为该对象可能被Object.freeze()方法冻结了，造成了响应式系统无法正常工作的问题。解决方案是使用Vue.set()方法，前提是需要判断对象是否被冻结，并在必要时将其解冻。

掌握了以上内容，我们就可以更好地使用$set方法更新嵌套属性了。

Vue报错：无法正确使用$set方法更新嵌套属性，如何解决？