Vue中的元件必須定義為一個方法，因為不定義為方法會報錯。。。
定義如下元件:

<template id="temp1">
	<div>
		<p>總共被點選了{{count}}次</p>
		<button @click="addcount">新增</button>
	</div>
</template>

var com ={
	data{
		count:0
	},
	template:'#temp1',
	methods:{
		addcount(){this.count++;}
	}
 

}

示意我們data必須定義為一個function，因為元件的定義就是一個可以複用的程式碼塊，為了節省重複開發而產生的，一個元件往往會複用很多次，但是我們理想的是每個被複用的元件在被我們使用的時候都是新的，這樣才能更好地被我們控制，但是如果把data定義為物件的話，

我們大致可以通過js原型鏈來對比下

var Component = function() {}; 
Component.prototype.data = {demo: 123 }
var component1 = new Component();
var component2 = new Component();
 

component1.data.demo = 456;
console.log(component2.data.demo); // 456

從上面可以看出，兩個例項都引用同一個物件，其中一個改變的時候，另一個也發生改變。

此部分程式碼轉載自 作者：feXiaojin 連結：https://www.jianshu.com/p/b821d3401314 來源：簡書

因為物件在記憶體中是引用資料型別，多個複用的元件其中一個改變了元件的值，其他元件都會受到其影響，違背了元件的初衷。
但是如果是一個函式，每個函式都有其單獨的作用域，多個元件互不影響。方便更好的使用！