原因:對(duì)象為引用類型擂煞,當(dāng)重用組件時(shí),由于數(shù)據(jù)對(duì)象都指向同一個(gè)data對(duì)象酵使,當(dāng)在一個(gè)組件中修改data時(shí)荐吉,其他重用的組件中的data會(huì)同時(shí)被修改;而使用返回對(duì)象的函數(shù)口渔,由于每次返回的都是一個(gè)新對(duì)(Object的實(shí)例)样屠,引用地址不同,則不會(huì)出現(xiàn)這個(gè)問(wèn)題
上面解釋完缺脉,你可能還是不大清楚痪欲,下面我們舉個(gè)簡(jiǎn)單的例子:
? // 1.對(duì)象方式(所有重用的實(shí)例中的data均為同一個(gè)對(duì)象)
? var data = {
? ? x: 1
? }
? var vm1 = {
? ? data: data
? }
? var vm2 = {
? ? data: data
? }
? vm1.data === vm2.data // true,指向同一個(gè)對(duì)象
? // 2.函數(shù)方式(所有重用的實(shí)例中的data均為同一個(gè)函數(shù))
? var func = function () {
? ? return {
? ? ? x: 1
? ? }
? }
? var vm3 = {
? ? data: func
? }
? var vm4 = {
? ? data: func
? }
? vm3.data() === vm4.data() // false攻礼,指向不同對(duì)象
注意: 函數(shù)方式中data都指向同一個(gè)函數(shù)业踢,但這個(gè)函數(shù)每次的返回值都是一個(gè)新的對(duì)象,可以嘗試如下(效果相同)
{x:1} === {x:1} // false
new Object({x:1}) === new Object({x:1}) // false