简述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
。这样,视图就只会更新一次,而不是每次修改数据时都更新。