主题是通信 1.是的,计算机科学中有几种不同的数据对比方式,常见的比如值比较(value comparison)和引用比较(reference comparison)。
值比较的意思就是比较两个变量的内容是否相同,无论它们在内存中的位置是什么。而引用比较则是比较两个变量是否指向内存中的同一个位置。
在JavaScript等很多编程语言中,基本类型如数字和字符串默认是按值比较的,这就是为什么 'hello' === 'hello'
返回 true
。
然而,当涉及到诸如对象或数组等复合数据类型时,情况就不同了。对象和数组存储在内存中的位置是动态分配的,这意味着即使两个数组的内容完全相同,但它们是两个不同的实例,分别占据内存中的两处不同的位置。所以,比如 [] === []
和 { a: 1 } === { a: 1 }
都会返回 false
,这就是引用比较。
所以,当我们使用 newvalue !== oldvalue
对对象或数组进行比较时,我们实际上是在进行引用比较,而这并不能正确地判断出两个对象或数组的内容是否相同。这就解释了你遇到的问题。通过将对象或数组转换为字符串,我们可以让比较更加准确地反映出我们想要的结果,即判断它们的内容是否相同。
2.异步问题:
看起来你的数据格式是正确的,是一个包含对象的数组,每个对象都有一个 username
属性。数据的格式没有问题。
这边猜测一下可能的问题:
-
检查一下这个
computed
属性userList
是否在你的 vue 模板中有被正确引用,有没有拼写错误,大小写错误等。 -
可能是异步数据加载的问题,你可以试着把
computed
改为refs
,因为 Vue3 的setup
是在beforeCreated
和created
之间执行,此时组件模板还没有挂载,我们无法在setup
中直接访问模板中的数据,因此我们需要用到refs
。
这里是一个例子:
const userList = ref([]); // 初始化为一个空数组
onMounted(async () => { // 等待组件挂载后再获取数据
const result = await api.getuserapi({ uid: "all" });
console.log("拿到的用户数据", result.data);
userList.value = result.data; // 用返回的数据更新userList
});
然后在模板中遍历 userList.value
。
再次检查你的代码,查看是否有以上提到的问题存在。如果问题依然存在,麻烦提供更多的信息或者错误日志,以便更好地帮你解决问题。