Vue元件中的data必須是個函式

最近一直在學習vue，今天看到乙個知識點，感覺有必要記錄下，以免後面忘記。

每個vue元件其實也可以看成時乙個vue例項，它也有生命週期，data，methods等。其中在vue元件中，data必須是個函式，這是因為：

元件是可復用的，我們開發好每個元件後，希望它可以在專案中多個地方使用，但又相互不影響。如下面示例：

my-counter這個元件，我在介面復用三次，在每次復用my-counter元件時，data其實時返回了乙個新的物件，當我改變其中任何乙個元件的資料時，對於其他的復用元件，是完全沒有影響的。

>

<
/my-counter>
<
/my-counter>
<
/my-counter>
<
/div>
"mycounter"
>
當前數值為：
}<
/h3>
"increment"
>
+<
/button>
"decrement"
>
-<
/button>
<
/div>
<
/template>
<
/body>
"../vue.js"
>
<
/script>
vue.
component
('my-counter',}
,    methods:
,decrement()
}})new
vue(
,    methods:
})

>

<
/my-counter>
<
/my-counter>
<
/my-counter>
<
/div>
"mycounter"
>
當前數值為：
}<
/h3>
"increment"
>
+<
/button>
"decrement"
>
-<
/button>
<
/div>
<
/template>
<
/body>
"../vue.js"
>
<
/script>
let obj =
vue.
component
('my-counter',,
methods:
,decrement()
}})

Vue 元件的data必須是乙個函式

定義乙個名為 button counter 的新元件 vue.component button counter template you clicked me times.元件是可復用的 vue 例項，且帶有乙個名字 在這個例子中是。我們可以在乙個通過new vue建立的 vue 根例項中，把這個元...

vue元件中data是個函式

當我們const vm new vue 用習慣了，data是乙個物件，可到了vue元件 vue.component cp data return info hello vue 因為vue.component是乙個建構函式，data資料是放在vue.component.prototype裡的所以如果是...

為什麼Vue元件裡面data必須是個函式

首頁我們先了解乙個原形和原型鏈，每個js物件和js方法都有乙個原形，js物件的是隱式原形 proto，而方法中的是顯示原形prototype，下面舉個例子 export default methods 其實底層是 component.proto data 而var obj 底層是var obj ne...