24.测试题集VUE
leezozz 3/19/2023 笔记
# 1.Vue2.x响应式修改数据(对象、数组)
- Vue不能检测对象属性的添加、删除(仅此而已,可直接对该对象重新赋值、修改该对象或内层对象的属性)
- Vue不能检测数组的项修改(根据index)、length修改(仅此而已,可直接对数组重新赋值,如使用filter、map、concat、slice等方式生成新数组对其赋值)
# 1.1对象修改
- 使用$set、set、$delete、delete
// $set是Vue.set的别名
this.$set(this.obj, k, v)
Vue.set(this.obj, k, v)
this.$delete(this.obj, k)
Vue.delete(this.obj, k)
1
2
3
4
5
6
2
3
4
5
6
- **Object.assign()**有时你可能需要为已有对象赋值多个新属性,比如使用 Object.assign() 或 _.extend()。但是,这样添加到对象上的新属性不会触发更新。在这种情况下,你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
1
2
2
# 1.2数组修改
- 使用$set、set、$delete、delete 与对象的第一种方式用法相同,只是将对象换成数组,将键(k)换成下标(index)
- 使用数组的操作函数(其实已被Vue进行了修改)
- splice(),
- push(), pop(),
- shift(), unshift(),
- sort(), reverse()
- Array拷贝 Array.from()等