而當(dāng)data選項(xiàng)是一個(gè)函數(shù)的時(shí)候，每個(gè)實(shí)例可以維護(hù)一份被返回對象的獨(dú)立的拷貝，這樣各個(gè)實(shí)例中的data不會(huì)相互影響，是獨(dú)立的。

 Vue.component('counter',{
  template:'#tmp1',
  data:function(){
   return {count:0}
  },
  methods:{
   increment(){
    this.count++
   }
  }
 })

  補(bǔ)充：下面看下vue組件中data必須是一個(gè)函數(shù)的原因

  vue組件中data值不能為對象，因?yàn)閷ο笫且妙愋停M件可能會(huì)被多個(gè)實(shí)例同時(shí)引用。如果data值為對象，將導(dǎo)致多個(gè)實(shí)例共享一個(gè)對象，其中一個(gè)組件改變data屬性值，其它實(shí)例也會(huì)受到影響。

上面解釋了data不能為對象的原因，這里我們簡單說下data為函數(shù)的原因。data為函數(shù)，通過return 返回對象的拷貝，致使每個(gè)實(shí)例都有自己獨(dú)立的對象，實(shí)例之間可以互不影響的改變data屬性值。

data為函數(shù)的示例：

data:function(){
  return {
      k1: 'v1',
      k2: 'v2',
    ...
  }
}

感謝各位的閱讀！關(guān)于“Vue組件中的data必須是一個(gè)function的原因是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！