一.v-if和v-for同时使用的影响
-
响应性和性能:
v-for
指令会根据数组的每个元素创建和销毁对应的DOM元素,而v-if
指令会根据条件来插入或移除元素。当v-if
和v-for
同时应用于同一个元素时,可能会影响Vue的响应性和性能。 -
循环内条件:当在
v-for
循环内使用v-if
条件时,条件将针对每个循环项进行评估。这意味着在每次循环迭代时都会执行条件判断,可能会增加渲染时间和性能开销。 -
注意元素的唯一性:如果
v-for
和v-if
同时应用于同一个元素,并且条件不同于循环的每个项,可能会导致元素的重复渲染或意外行为。请确保在使用时考虑到元素的唯一性和条件的正确性。
为了避免潜在的问题,你可以考虑以下几种解决方案:
- 将
v-if
放在父元素上,以控制整个循环的渲染。 - 在循环项内部使用计算属性或方法来进行条件判断,而不是直接在循环的元素上使用
v-if
。 - 如果条件判断与循环项无关,可以将
v-if
应用于循环的父元素上,而不是直接在循环的元素上使用。
在Vue3后,进行了优化
在 Vue 3 中,如果你在同一个元素上同时使用了 v-if
和 v-for
,Vue 会智能地进行优化,以避免重复渲染和不必要的性能开销。Vue 3 会根据静态分析判断循环是否依赖于条件,并自动将条件移到外部元素上,以提高性能。
这意味着你可以在 Vue 3 中更自由地在同一个元素上同时使用 v-if
和 v-for
,而不必过多担心性能问题。
二.含对象的数组去重
const arr = [
{att_val: "512G", act: false},
{att_val: "512G", act: false},
{att_val: "512G", act: false},
{att_val: "1T", act: false},
{att_val: "1T", act: false}
];
// 创建一个空对象来存储去重后的结果
const uniqueObjs = {};
// 遍历原始数组
for (let i = 0; i < arr.length; i++) {
const obj = arr[i];
// 使用对象的属性值作为键来检查对象是否已存在于结果对象中
const key = obj.att_val + obj.act;
if (!uniqueObjs[key]) {
// 如果不存在,则将其添加到结果对象中
uniqueObjs[key] = obj;
}
}
// 将结果对象转换为数组
const result = Object.values(uniqueObjs);
console.log(result);
这段代码使用一个空对象uniqueObjs
来存储去重后的结果。遍历原始数组时,将每个对象的属性值拼接成一个唯一的键,并检查该键是否存在于结果对象中。如果不存在,则将当前对象添加到结果对象中。最后,将结果对象的值转换为数组形式即可获得去重后的结果。
当使用方括号表示法 []
时,可以通过一个变量或表达式来动态地访问对象的属性。这在需要动态计算属性名称时非常有用。