前言：

在平常的开发中，经常会在vue中用到对象数组，如渲染一个小区的列表，数据结构可能如下所示：

CommunityList: [

{

_id: '',

community_code: '',

community_name: '',

...

},

...

]

当需要实现选择某几个小区加入收藏列表的时候，页面上往往需要增加el-checkbox来勾选，在数据结构上需要增加一个类似relation属性来标志该小区是否被选择。

所以在从接口拿到数据的时候需要在数据上增加relation属性，处理方式可能如下所示：

/** result是从接口获取的数据 **/

if (result && result.retCode === 0) {

this.communityList = result.list.map(item => {

item.relation = false;

return item;

})

}

当你碰巧在处理数据之前先将result.list赋值给了另一个实例属性，如下所示：

/** result是从接口获取的数据 **/

if (result && result.retCode === 0) {

this.communityListCache = result.list; // 新增的代码

this.communityList = result.list.map(item => {

item.relation = false;

return item;

})

}

那么此时el-checkbox的表现可能会不太正常，如下所示：

点击时状态不会立马改变，而是等鼠标移开了才改变

下面两个图均是在el-checkbox为灰色状态下点击的结果，一个为true，另一个却是false

分析：

经过打断点分析发现某些属性并不是像其它属性一样的表现

如这里的relation属性(el-checkbox绑定的就是该属性)，不像下面的_id属性所表现的一致，_id属性所表现的就是正常的被vue监听的状态，很明显relation并没有被vue监听，问题就出现在新增的代码那里。

通过分析vue的源代码可知，实例属性被赋值的时候会使用Object.defineProperties方法将其转化为可被监听的属性，如果赋值了一个数组，也会将数组转化为可被监听的对象，且会深入内部监听如下：

截取自vue源代码中的部分片段：

export class Observer {

value: any;

dep: Dep;

vmCount: number; // number of vms that have this object as root $data

constructor (value: any) {

this.value = value

this.dep = new Dep()

this.vmCount = 0

def(value, '__ob__', this)

if (Array.isArray(value)) {

if (hasProto) {

protoAugment(value, arrayMethods)

} else {

copyAugment(value, arrayMethods, arrayKeys)

}

this.observeArray(value) // 当为数组时，转化数组

} else {

this.walk(value)

}

}

...

/**

* Observe a list of Array items.

*/

observeArray (items: Array) {

for (let i = 0, l = items.length; i < l; i++) {

observe(items[i]) // 逐级转化

}

}

}

又因为js中引用类型只是指向实际数据的类似指针的结构，此时this.communityListCache和result.list在内存中实际就是指向同一个地址，当vue转化this.communityListCache的时候实际就是转化了result.list

this.communityListCache = result.list; // 新增的代码

vue会在result.list中新增__ob__这个属性来标志已经被转化过了，如下图所示：

由于relation是在之后才新增的属性，而在vue转化的时候，如果对象有__ob__属性，则表示已经被转化过了，不会再次去处理，如下：

截取自vue源代码中的部分片段：

/**

* Attempt to create an observer instance for a value,

* returns the new observer if successfully observed,

* or the existing observer if the value already has one.

*/

export function observe (value: any, asRootData: ?boolean): Observer | void {

if (!isObject(value) || value instanceof VNode) {

return

}

let ob: Observer | void

if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { // 判断是否本来就存在__ob__属性，如果存在就直接赋值，不做处理

ob = value.__ob__

} else if (

shouldObserve &&

!isServerRendering() &&

(Array.isArray(value) || isPlainObject(value)) &&

Object.isExtensible(value) &&

!value._isVue

) {

ob = new Observer(value)

}

if (asRootData && ob) {

ob.vmCount++

}

return ob

}

这样后面新增的relation属性实际就是没有被vue所监听的属性，自然就不会响应变化。

解决办法：

1、在完全处理好原始数据后再赋值给其它的实例属性，如下：

/** result是从接口获取的数据 **/

if (result && result.retCode === 0) {

// this.communityCache = result.list; // 原始代码

this.communityList = result.list.map(item => {

item.relation = false;

return item;

});

this.communityCache = result.list; // 新增的代码

}

2、由于接口返回的数据一般没有包涵特殊类型，所以在赋值之前进行简单的深拷贝即可，这样的话，这两个变量就不是指向同一个对象，也就不会相互影响：

/** result是从接口获取的数据 **/

if (result && result.retCode === 0) {

// this.communityCache = result.list; // 原始代码

this.communityCache = JSON.parse(JSON.stringify(result.list)); // 新增代码

this.communityList = result.list.map(item => {

item.relation = false;

return item;

});

this.communityCache = result.list; // 新增的代码

}

注：个人总结，如有不对，还望指正，谢谢！