Vue.delete(
this
.obj, k)
复制代码
2.
Object.assign()
有时你可能需要为已有对象赋值多个新属性,比如使用 Object.assign() 或 _.extend()。但是,这样添加到对象上的新属性不会触发更新。在这种情况下,你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
复制代码
数组
1.
$set
、
set
、
$delete
、
delete
与对象的第一种方式用法相同,只是将 对象 换成 数组,将 键(k) 换成 下标(index)
2. 使用数组的操作函数(其实已被Vue进行了修改)
splice()
,
push()
,
pop()
,
shift()
,
unshift()
,
sort()
,
reverse()
3. Array拷贝
Array.from()等
难点(坑):
1. 不能向vue实例或vue组件(this、this.$data)添加未定义的属性
2. 对于对象、数组进行set时,value可以为复杂的数据结构,vue会进行递归从而将其都转为reactive的数据
,举例如下:
this.$set(this.texts, 0, [
[1,2],
[3,4],
{name: 'XiaoMing'}
复制代码
3. v-model绑定的数据需要为 LHS,而不能为 RHS(item及&&、||、=、(,)、双目等运算符返回LHS)
,举例如下:
复制代码
// 错误, item为RHS
<input v-for="(item, index) in texts" :key="index" v-model="item">
复制代码
// 错误
<input v-for="(item, index) in texts" :key="index" v-model="1 > 0 ? texts[index] : codes[index]">
复制代码
// 错误
<input v-for="(item, index) in texts" :key="index" v-model="(1 > 0 && texts[index]) || codes[index]">
复制代码
正确
<input v-for="(item, index) in texts" :key="index" v-if="1>0" v-model="texts[index])">
<input v-for="(item, index) in texts" :key="index" v-if="1<0" v-model="codes[index]">
复制代码
正确
<input v-for="(item, index) in texts" :key="index" v-model="texts[index]">
复制代码
4. computed必须绑定一个data中的数据(或对象的属性、数组的项),否则无法响应式更新,尤其注意绑定初始不存在的数据时
,举例如下:
computed: {
prop () {
if
(!
this
.obj.
data
)
return
{}
return
this
.obj.
data
prop () {
if
(!
this
.obj.
data
)
this
.$
set
(
this
.obj,
data
, {}})
return
this
.obj.
data
prop () {
if
(!
this
.obj.arr)
return
[]
return
this
.obj.arr
prop () {
if
(!
this
.obj.arr)
this
.$
set
(
this
.obj, arr, []})
return
this
.obj.arr
复制代码
参考: