鍍金池/ 問答/數(shù)據(jù)分析&挖掘  HTML/ vue數(shù)組渲染的問題。

vue數(shù)組渲染的問題。

我在用vue熏染table表格的時候遇到一個問題,在原數(shù)組中存放數(shù)據(jù)對象,其中有一個屬性a為'',在渲染的時候,這個屬性對應的td也是顯示為空,我用slice()復制了原數(shù)組得到數(shù)組tempAry,然后,在數(shù)組tempAry中其中的幾個對象的這個a屬性從''賦值為其他值的時候,在Table表中之前為空的地方會渲染出我賦的值。

所以我就有了疑問,為什么我操作復制后的數(shù)組會導致界面的渲染呢? 
var tempAry = this.sortAry.slice();
    tempAry[0].sortTag = '8080';
回答
編輯回答
奧特蛋

slice只是第一層拷貝,對于第二層而言還是淺拷貝,請用JSON.parse(JSON.stringify(this.sortAry))

            var tempAry = JSON.parse(JSON.stringify(this.sortAry));
            tempAry[0].sortTag = '8080';
    
2018年2月21日 14:19
編輯回答
萌面人

你把這個復制之后數(shù)組打印出來看看,里面每個元素里面的屬性都還是被劫持了get set方法。所以你修改了tempArr還是會導致之前的視圖被重新渲染。如果你想把vm.data無副作用地賦值給某一個變量,可以直接使用JSON.stringify(vm.data)

2018年2月13日 06:19
編輯回答
墨小羽

深拷貝和淺拷貝的問題吧

2017年10月17日 01:24