一句话:先抛结论,在vue中通过索引修改数组中的数据页面是不会改变的也就不是响应式
以下是具体的代码案例
var vm = new Vue({
el: '#app',
data: {
// 数组类型的类型
list: ['apple', 'orange', 'banana', { a: 123 }],
// 对象类型的数据
info: {
name: 'lisi',
age: 12
}
}
});
vm.list[1] = 'lemon'; // 用索引值改变数组数据不是响应式的 数据改变页面不会改变
vm.list[3].a = 456 // 通过索引修改某一项的对象的内部的属性是可以实现响应的改变的
// 如果想要通过索引值来响应式的改变数组数据可以使用以下两种方法
vue.set(vm.list,2,pear)
vm.$set(vm.list,1,Mac)
// 给对象添加属性 不是响应的:数据改变但是页面没有更新
vm.info.gender='formale'
vm.info.['grades']=60
// 以上就是不是响应的,但是根据vue.set/vm.$set来实现响应式
一句话总结:通过索引值直接修改数据,页面是不会响应的改变。但是可以实现,给对象添加属性也不是响应的,但是也可以实现