this.$set(obj, key, value)
使用场景:为data中的某个对象或数组添加数据时,数据添加了但视图层没有显示
原因:由于受JavaScript的限制,vue.js不能监听对象属性的添加和删除,因为在vue组件初始化的过程中,会调用getter和setter方法,所以该属性必须是存在在data中,视图层才会响应该数据的变化
使用方法:
// 对象
this.$set(this.obj, 'name', 'jack');
// 数组
this.$set(this.arr, 0, 10);
- 另一种方法:Object.assign(target, sources)方法也可以解决这个问题
// 对象 一般用于对象的合并(浅拷贝)
this.student = Object.assign({}, this.obj)
总结
- 在修改数据时如果视图没有变化则可以使用this.$set(),或者Vue.set()