vue2新增的属性为什么没有响应式

Vue.js是一款用于构建用户界面的渐进式JavaScript框架，它会通过数据驱动来实现UI的自动更新。Vue.js的核心特性之一就是响应式系统，它可以帮助开发者轻松地将数据和UI进行绑定，并且当数据发生改变时，UI会自动更新。然而，在Vue.js的2.x版本中，新增的属性确实不具备响应式特性，以下是一些原因解释：

1.性能优化
在Vue.js 2.x之后的版本中，新增的属性若要具备响应式特性，意味着需要对整个对象进行深度遍历和递归监听，这样会带来一定的性能开销。为了提高性能，Vue.js 2.x采用了更高效的响应式系统实现，只会监听已经存在于初始化时的属性。

2.动态添加属性
Vue.js的响应式系统是在组件初始化阶段进行的，会对初始数据进行侦听和代理。而新增的属性需要在组件初始化之后才能被添加，所以Vue.js默认不具备对新增属性的响应式支持。这是因为Vue.js需要在初始化时就确定所有响应式数据的侦听范围，以及构建所需的Watcher列表。

3.对象的响应式属性
在Vue.js 2.x之前的版本中，可以通过Vue.set方法（Vue.$set的别名）将对象的新增属性添加为响应式属性。但是在Vue.js 2.x版本中，为了减少API的复杂性，Vue.js放弃了Vue.set方法的用法，推荐使用响应式方法进行替代。

尽管Vue.js的新增属性默认不具备响应式特性，但是我们仍然可以通过以下方法来实现属性的响应式：

1.在data对象中初始化属性
在Vue.js组件的data选项中，预先声明新增属性，即可让该属性具备响应式特性。

2.使用Vue.set方法或者this.$set方法
使用Vue.js提供的Vue.set方法或者组件实例的this.$set方法，可以将新增属性添加到对象上，并使其成为响应式属性。这样就可以实现动态添加属性后的响应式更新。

3.使用计算属性
通过计算属性来获取新增属性的值，将其作为计算属性的依赖，这样只要新增属性发生变化，计算属性就会重新计算并更新UI。

总而言之，Vue.js 2.x版本的新增属性默认不具备响应式特性，这是为了提高性能和简化API的设计选择。但是我们仍然可以通过一些方法来实现新增属性的响应式更新。

Vue2新增的属性没有响应式是因为Vue2中的响应式系统是基于ES5的Object.defineProperty实现的，而Object.defineProperty无法拦截对象属性的添加和删除。因此，当我们在Vue2中向一个对象添加新属性时，这个新属性将不会被响应式系统检测到。

具体来说，Vue2的响应式系统是通过在组件实例化时将data选项中的属性转换为getter和setter函数来实现数据劫持的。当我们访问这些属性时，Vue会通过getter函数进行依赖收集，将依赖关系添加到一个依赖收集器中。当属性发生变化时，Vue会通过setter函数触发依赖收集器中的更新函数，从而更新相关的DOM。

然而，由于Object.defineProperty方法无法拦截属性的添加和删除，所以当我们在Vue2中给对象添加新属性时，这个新属性并不会触发getter和setter函数。因此，这个新属性也就无法被响应式系统检测到，从而无法自动更新相关的DOM。

虽然Vue2不能直接实现新增属性的响应式，但我们可以通过Vue.set或vm.$set方法来实现。这两个方法都可以将一个属性设置成响应式，从而使其能够被响应式系统检测到并自动更新相关的DOM。

除了Vue.set和vm.$set方法外，我们还可以使用Vue.observable API来实现新增属性的响应式。Vue.observable方法可以将一个普通对象转换成一个响应式对象，从而使对象的所有属性都能够被响应式系统检测到。

总结起来，Vue2中新增的属性没有响应式是因为基于ES5的Object.defineProperty方法无法拦截属性的添加和删除。但我们可以使用Vue.set、vm.$set或Vue.observable方法来实现新增属性的响应式。

在Vue.js 2.x中，新增的属性默认情况下是没有响应式的。这是因为Vue.js在创建实例时，会对传入的data对象进行递归遍历，将所有属性转化为Getter/Setter的形式，以便进行依赖追踪和数据变化的通知。

但是，对于新增的属性，Vue.js没有办法事先知道其存在，因此也无法对其进行劫持和监听。这样一来，当我们直接给实例添加一个新属性时，该属性是不会触发视图的更新的。

然而，Vue.js提供了一个Vue.set方法来解决这个问题。Vue.set方法接收三个参数：对象、属性名和属性值。它会确保新增的属性是响应式的，并且触发视图的更新，示例如下：

Vue.set(vm.someObject, 'newProperty', 'some value');

除了Vue.set方法，Vue.js还提供了vm.$set方法，该方法是Vue.set的一个别名。使用vm.$set可以更方便地给实例添加响应式的属性。

除了使用Vue.set或者vm.$set的方式外，如果我们清楚地知道要添加的属性是响应式的，也可以在创建Vue实例的时候声明响应式的属性，示例如下：

new Vue({
  data: {
    someObject: {
      newProperty: 'some value'
    }
  }
})

在上述代码中，将newProperty声明在someObject下，并赋予初始值，这样该属性就是响应式的。

综上所述，虽然Vue.js 2.x新增的属性默认情况下不是响应式的，但我们可以使用Vue.set或者vm.$set方法来实现新增属性的响应式。另外，在创建Vue实例时，我们也可以声明响应式的属性。