vue给对象添加属性没有响应式的问题及解决

针对“vue给对象添加属性没有响应式的问题及解决”的问题，我们需要了解Vue的响应式系统以及如何正确地添加响应式属性。

Vue的响应式系统

首先，我们需要了解Vue的响应式系统是基于ES5的Object.defineProperty实现的，它会在监听的属性被修改时触发更新。当我们通过Vue.$set或者直接使用赋值的方式改变组件的data中对象的属性时，我们会触发Vue的响应式更新，从而页面可以变更渲染。

对象属性添加无响应的问题

然而，在我们使用Vue.$set或直接赋值的方式改变对象的属性时，如果该属性没有事先在对象中声明，则会出现无响应的问题。这是因为Vue无法监听对象的新增属性。

解决方案

解决这个问题的方法比较简单，我们只需要在对象中预先声明该属性即可。但这并不是一个容易被发现的问题，因为在一些情况下（比如我们使用了第三方库），要在模板里使用的属性并未在data中进行初始化，我们就需要手动添加。

让我们看一下两个示例说明：

示例一

在数据data对象中的属性b是一个对象，而b中并没有保存c属性，如果我们想要给b添加c属性，代码如下：

<!-- 模板 -->
<template>
  <div>{{ $data.b.c }}</div>
</template>

<!-- JS 代码 -->
<script>
  export default {
    data () {
      return {
        b: {}
      }
    },

    mounted () {
      this.$set(this.b, 'c', 'Hello, World!')
    }
  }
</script>

我们使用Vue提供的$set方法来给b添加属性c，从而解决了对象属性添加无响应的问题。

示例二

另一个解决该问题的方法是将嵌套的对象改成响应式对象。下面是一个示例：

<!-- 模板 -->
<template>
  <div>{{ $data.b.c.d }}</div>
</template>

<!-- JS 代码 -->
<script>
  export default {
    data () {
      return {
        b: {
          c: {
            d: 'Hello, World!'
          }
        }
      }
    }
  }
</script>

在这个示例中，我们可以在初始化时在对象中声明b、c、d属性，从而避免了对象属性添加无响应的问题，同时也增加了代码的可读性。

综上所述，我们可以在对象属性添加前预先声明该属性或将嵌套的对象改成响应式对象来解决Vue给对象添加属性没有响应式的问题。