快捷導(dǎo)航

Vue組件中的data必須是一個function的原因淺析

更新時間：2018年09月03日 17:10:05 作者：北海之靈

這篇文章主要介紹了Vue組件中的data必須是一個function的原因淺析，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

組件可以有自己的data，并且data必須是一個function。

在下面這個例子中，data 返回了一個在外部定義的對象。并且這個組件在頁面中使用了3次，點擊+1時出現(xiàn)了如下情況：data中的count屬性影響到了所有實例。

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" rel="external nofollow" >
  <style type="text/css">
 #app{
  margin:20px;
 }
  </style>
 </head>
<body>
 <div id='app'>
  <counter></counter>
  <counter></counter>
  <counter></counter>
 </div>
 <template id="tmp1">
  <div>
   <input type="button" value="+1" @click="increment">
   <h1>{{count}}</h1>
  </div>
 </template>
</body>
<script src="../lib/vue.js"></script>
<script>
 var dataObj = {count:0}
 //這是一個計數(shù)器組件,每當(dāng)點擊按鈕,讓data中的count值加1
 Vue.component('counter',{
  template:'#tmp1',
  data:function(){
   return dataObj
  },
  methods:{
   increment(){
    this.count++
   }
  }
 })
 var vm = new Vue({
  el:'#app',
 })
</script>
</html>

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

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

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

vue組件中data值不能為對象，因為對象是引用類型，組件可能會被多個實例同時引用。如果data值為對象，將導(dǎo)致多個實例共享一個對象，其中一個組件改變data屬性值，其它實例也會受到影響。

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

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

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

總結(jié)

以上所述是小編給大家介紹的Vue組件中的data必須是一個function的原因淺析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue組件中的data必須是一個function的原因淺析

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具