简述vue深拷贝,数量加减dom不进行二次渲染,解决方法 ?

在 Vue 中,如果我们直接修改数据的话,会触发组件的重新渲染。如果我们想要避免不必要的渲染,我们可以使用 Vue 的 nextTick 方法或者使用深拷贝。

一种解决方法是使用 Vue.set 或者 this.$set 方法。这个方法可以确保新添加的属性也是响应式的,同时也会触发视图的更新。

例如:

this.$set(this.someObject, 'b', 2)

在这个例子中,我们在 someObject 对象上添加了一个新的属性 b,并设置其值为 2。这将会触发视图的更新。

另一种解决方法是使用深拷贝。我们可以使用 JSON.parse(JSON.stringify(obj)) 来创建一个对象的深拷贝,然后修改这个拷贝,最后再将修改后的拷贝赋值回原来的对象。

例如:

let copy = JSON.parse(JSON.stringify(this.someObject))
copy.b = 2
this.someObject = copy

在这个例子中,我们首先创建了 someObject 的一个深拷贝,然后在这个拷贝上进行修改,最后再将修改后的拷贝赋值回 someObject。这样,视图就只会更新一次,而不是每次修改数据时都更新。

发表评论

后才能评论