vue的data綁定和循環(huán)完成之后添加到data 的數(shù)據(jù)有什么不同？

現(xiàn)有需求是這樣的需要?jiǎng)?chuàng)建一個(gè)表格，里面有月份和金額；
因?yàn)槊恳粭l的字段都一樣，在data里寫12條一模一樣的數(shù)據(jù)，感覺太冗余了，我就想寫一個(gè)循環(huán)，循環(huán)10遍之后添加到data里進(jìn)行渲染。但是問(wèn)題出現(xiàn)了：

在data寫12條數(shù)據(jù)你渲染時(shí)，只要在相應(yīng)的地方加上數(shù)據(jù)的下標(biāo)就可以，每條數(shù)據(jù)互不影響（不會(huì)產(chǎn)生雙向綁定的效果）；但是當(dāng)你循環(huán)玩之后添加到data里，在dom渲染時(shí)，盡管寫上下標(biāo)還是會(huì)觸發(fā)雙向綁定效果，為什么？

怎么解決各位小哥哥小姐姐~~

//
data() {
    return {
                    monthTableData: {
                        paymentType:"",
                        paymentMonth: '',
                    },
    }
}
            copyData() {
            let list = [];
            for (var i =0; i<=5;i++) {
                for (let k in this.monthTableData) {
                    list.push(this.monthTableData);
                }
            }
                this.monthTableDataNew = list;
            },

回答

編輯回答

忠妾

對(duì)象是引用類型。

list.push(this.monthTableData)

不管你push多少個(gè)this.monthTableData，數(shù)組list里面的元素都是同一個(gè)對(duì)象，改變?nèi)我庖粋€(gè)自然都改變了，
可以用先深拷貝一次?；蛘撸?/p>

list.push({
    paymentType:"",
    paymentMonth: '',
})

2017年5月15日 17:25

編輯回答

雅痞

Vue 組件實(shí)例化時(shí)，會(huì)對(duì) data 返回的結(jié)果進(jìn)行一次重構(gòu)，把所有屬性用 getter/setter 取代。比如下面例子返回的對(duì)象，里面有一個(gè)屬性 a，值是1：

{
  data() {
    return {
      a: 1,
    }
  }
}

就會(huì)被處理成（大概是這樣）：

{
  _a: 1,
  get a() {
    return _a;
  },
  set a(value) {
    _a = value;
  }
}

這是 Vue 的響應(yīng)式收集數(shù)據(jù)變化的方式。所以，實(shí)例化之后，如果你再修改對(duì)象，比如 this.b = 'hello world';，因?yàn)榇藭r(shí)對(duì)象 this.$data 上面沒有 b 的 getter/setter，所以就會(huì)走 JS 標(biāo)準(zhǔn)的賦值過(guò)程，那么后者就不具備響應(yīng)式的能力。

回到你的問(wèn)題，處理完賦給 data，就會(huì)響應(yīng)，因?yàn)橛?getter/setter；賦值之后再處理，就沒有。

2018年3月6日 04:43

編輯回答

局外人

不太清楚你說(shuō)的雙向綁定是哪里，是指綁定了data中的monthTableData？，那就把它放到copyData中就可以不要在data屬性中放了，如下
copyData() {

        let = monthTableData: {
            paymentType:"",
            paymentMonth: '',
        },
        let list = [];
        for (var i =0; i<=5;i++) {
            for (let k in monthTableData) {
                list.push(monthTableData);
            }
        }
            this.monthTableDataNew = list;
        },

2017年5月14日 15:39