【vue设计与实现】非原始值的响应式方案 12-代理Set和Map-避免污染原始数据

在讲解“避免污染原始数据”之前先来看下Map类型的set和get这个两个方法
对于Map数据类型，当用get方法读取数据时，需要调用track函数追踪依赖建立响应联系；当用set方法设置数据时，需要调用trigger方法触发响应，如下面代码所示：

const p = reactive(new Map(['key',1]))
effect(()=>{
	console.log(p.get('key'))
})
p.set('key',2) // 触发响应
1
2
3
4
5

下面是get方法的具体实现

const mutableInstrumentation= {
	get(key){
		const target = this.raw
		const had = target.has(key)
		track(target, key)
		// 如果存在，则返回结果，要注意的是，如果得到的记过res仍然是可代理的数据
		// 则要返回使用reactive包装后的响应式数据
		if(had){
			const res = target.get(key)
			return typeof res === 'object' ? reactive(res):res
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

这里要注意的是，在非浅响应的情况下，如果得到的数据仍然可以被代理，则要调用reactive(res)将数据转换成响应式数据后返回。在浅响应模式下，就不需要这一步了。

set的实现要注意的是在set方法调用时，需要调用trigger方法触发响应，只不过在触发响应时，要注意类型是SET还是ADD，如下代码所示：

const mutableInstrumentation= {
	set(key,value){
		const target = this.raw
		const had = target.has(key)
		// 获取旧值
		const oldValue = target.get(key)
		// 设置新值
		target.set(key, value)
		// 如果不存在，则说明时ADD类型操作，意味着新增
		if(!had){
			trigger(target, key, 'ADD')
		}else if(oldValue !== value || (oldValue === oldValue && value === value)){
			// 如果不存在，并且值变了，则是SET类型的操作，意味着修改
			trigger(target, key, 'SET')
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

上面实现的set函数可以正常工作了，但是还是存在问题，也就是set方法会污染原始数据。看下面的代码：

const m = new Map()
const p1 = reactive(m)
const p2 = reactive(new Map())
p1.set('p2',p1)
effect(()=>{
	console.log(m.get('p2').size)
})
m.get('p2').set('foo',1)
1
2
3
4
5
6
7
8

在p1.set(‘p2’,p1)后问题出现了，在副作用函数中，通过原始数据m来读取数据值，然后又通过原始数据m设置数据值，此时发现副作用函数重新执行了。但这不是我们期望的行为，因为原始数据不应该具有响应式数据的能力，否则代码就乱套了。

那么导致问题的原因是什么？观察前面实现的set方法：

const mutableInstrumentation= {
	set(key, value){
		const target = this.raw
		const had = target.has(key)
		const oldValue = target.get(key)
		// 这里把value原封不动地设置到原始数据上
		target.set(key, value)
		if(!had){
			trigger(target, key, 'ADD')
		}else if(oldValue !== value || (oldValue === oldValue && value === value)){
			trigger(target, key, 'SET')
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在set方法内，把value原样设置到了原始数据target上。如果value时响应式数据，就意味着设置到原始对象上的也是响应式数据，这里把响应式数据设置到原始数据上的行为成为数据污染。

要解决也很简单，只需在调用target.set设置值之前对值进行检查即可：只要发现即将要设置的值是响应式数据，那么就通过raw属性获取原始数据，再把原始数据设置到target上。

const mutableInstrumentation= {
	set(key, value){
		const target = this.raw
		const had = target.has(key)
		const oldValue = target.get(key)
		// 获取原始数据，由于value本身可能已经是原始数据，所以此时value.raw不存在，则直接使用value
		const rawValue = value.raw || value
		target.set(key, rawValue )
		if(!had){
			trigger(target, key, 'ADD')
		}else if(oldValue !== value || (oldValue === oldValue && value === value)){
			trigger(target, key, 'SET')
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

现在就不会污染数据，但是上面的方案还是有问题，一直使用raw属性来访问原始数据是有缺陷的，因为可能和用户自定义的raw冲突，所以在严谨的实现中，需要使用唯一的标识来作为访问原始数据的键，例如使用Symbol类型来替代。

其实不止是set方法要避免数据污染，Set类型的add方法，普通对象的写值操作，还有为数组添加元素的方法等，都要做类似的处理。