Vue 数据变动视图不更新的处理

由于 JavaScript 的限制， Vue 不能检测以下变动的数据：

利用数组索引直接设置：this.list[0] = newValue

修改数组的长度：this.list.length = newLength

新增字段age：this.student.age = 10

解决方案

// 利用索引直接设置
this.list[0]=newValue; //不更新
this.list.splice(index, 1,this.updatedData); //通过splice 替换数据 触发视图更新

// 修改数组的长度
this.list.length = newLength; //不更新
this.list.splice(newLength); //通过splice 替换数据 触发视图更新

// 新增字段
this.student.age = 10; //不更新
this.$set(this.student,'age',10); //因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。