vue2使用Set集合无法响应式踩坑.md_vue2computed的set不触发get-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40985294/article/details/128504510

本文介绍了在Vue2小程序开发中遇到的Set数据结构不触发视图更新的问题。由于Vue2对Set的add、delete方法未做特殊处理，导致 computed 属性无法监听到数据变化。解决方法是自定义一个基于数组的Set实现，利用数组的splice方法进行增删操作，以确保Vue2能检测到数据变更。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、问题

在写uniapp小程序时，需要对数据进行去重判断，因此在data中使用了一个Set集合,同时在computed中使用了该变量：

data() { 
	return { codeSet: new Set() }
}，
computed: {
	isEmpty() {
		return this.codeSet.size === 0;
	}
}
//业务中则通过this.codeSet.add、this.codeSet.delete操作

但是computed并没有随着codeSet的增删而触发更新。

二、原因

// js数组伪代码
class Array {

	constructor() {
	  // 这是真实的数组,就像c语言中的数组一样，只能通过索引操作而没有方法
	  this.data = new 底层数组();
	 }
	
	function push() {}
	function splice () {}
	//...
}

在vue2中，data中的属性如果是对象类型，那么vue2会递归代理对象类型属性的get、set方法来监听属性的变更。而相应的，js中的数组对象代理内部的数组如上data的get、set，但这样只能在对这个data属性进行直接赋值的时候才能通知vue，而通过索引的操作vue无法监听。因此vue2对其方法进行了代理的，如push,splice等方法，当我们调用这些方法时，会将传入的数据代理为响应式，并通知vue2数据变更从而更改视图。而vue2没有对codeSet进行特殊处理，故调用add、delete方法vue2无法监听数据变更。