vue中data必須是函式
阿新 • • 發佈：2018-12-31
看了好多部落格論壇啥的，我比較笨不是很理解，包括我之前轉載的一篇，不過我轉載的我是看懂了，今天沒事重新過了下官網，下面我們一起看看官網是如何給出解答的，這裡面第一個他也用了return，但是和我們說的return不同，這個完全是為了躲避語法報錯，我們也可以自己建立vue例項註冊元件，然後多個地方同時註冊，解釋的還是很好的，我這裡拋磚引玉下~~~
通過 Vue 構造器傳入的各種選項大多數都可以在元件裡用。data 是一個例外，它必須是函式。實際上，如果你這麼做：
|
Vue.component('my-component', { template: '<span>{{ message }}</span>' |
那麼 Vue 會停止，並在控制檯發出警告，告訴你在元件中 data 必須是一個函式。理解這種規則的存在意義很有幫助，讓我們假設用如下方式來繞開 Vue 的警告：
| <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter></div> |
|
var |
由於這三個元件共享了同一個 data，因此增加一個 counter 會影響所有元件！這不對。我們可以通過為每個元件返回全新的 data 物件來解決這個問題：
| data: function () { return { counter: 0 }} |
現在每個 counter 都有它自己內部的狀態了：