vue中在一个数组中，通过循环添加一个新属性，添加后数据变了，属性没有改变。这是为什么呢？
受现代JavaScript的限制，Vue不能检测到对象属性的添加或删除。由于Vue会在初始化实例时对属性执行 getter/setter转化过程，所以属性必须在data对象上存在才能让Vue转换它,这样才能让它是响应式的。
一、分析说明
官网上关于数据的说明
当一个Vue实例被创建时，它将data对象中的所有属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
当这些数据改变时，视图会进行重新渲染。值得注意的是只有当实例被创建时data中存在的属性才是响应式的。也就是说如果你添加一个新的属性b,那么对b的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值，比如。
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
这里唯一的例外是使用Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。以下是一些具体的分析：
data(){
return {
user:{
name:"Helle",
age:"19",
}
}
}
//其中user.name 和user.age都是相应的，因为他们初始化时在data对象上存在
//可以直接通过user.name="LiLi" 的方式来修改
//user.sex 是非响应的，因为在data对象上不存在。
Vue不允许在已经创建的实例上动态添加新的根级响应式属性。然而它可以使用Vue.set(obj,key,value)方法将响应式属性添加到嵌套对象上：
Vue.set(vm.someObject,'sex','girl');
还可以使用vm.$set实例方法，这也是全局Vue.set方法的别名。
this.$set(this.someObject,'sex','girl');
//上面的例子可以写为
this.$set(this.user,'sex','girl');
//则user为{name:"Helle", age:"19",sex:"girl"} ,三个属性都是响应式的。切记this.user.sex="girl"这样写是无效的。
有时你想向一个已有对象添加多个属性，例如使用 Object.assign() 或 _.extend() 方法来添加属性。但是，这样添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性：
二、列表渲染
网友评论