[vue]data为一个对象数组,替换数组中的对象时不渲染。


数组和对象直接赋值vue都是不响应的。

1、当一个对象数组用v-for渲染时,只监听数组的长度,但数组长度变化时才会渲染。

且vue只会根据长度局部渲染,即如果在数组前插入一个数组,vue会检测到对象数组的长度增加了1,会找到数组的最后一个对象,渲染出来。而不会重新把整个数组渲染一遍。

是的,你一定发现了问题,我们是在数组最前面添加的对象,但是vue渲染的却是最后一个对象。

this._mydata.unshift(newobj)

虽然unshift是响应式的,但此时vue只监听数组的长度,所以这种情况是不会响应的。

2、当你给数组直接赋值时

this._mydata = newdata

_mydata和newdata都是对象数组,如果newdata和_mydata的长度一样,vue并不会做出响应,因为对象数组只检测长度,长度没变vue就认为没有变化。

如果newdata.lenght - _mydata.lenght = n,vue会检测到长度变化,并取newdata中后n个对象进行渲染。

同理,长度比原数据短时,vue会删除最后面几个对象,对前面的对象不会检测是否一样。

如果你是直接赋值,可以先置空_mydata,再给其赋值

this._mydata = []

this._mydata=newdata

vue会先删除所有元素,然后重新渲染。

缺点:如果数组置空时,页面会显示一个notfount组件,告诉用户没有数据。那此时就会出现一个闪烁效果。

vue