前面介紹 Vue 的元件結構，要多少都隨你掛載，直到滿意。
但今天要多講一點 Vue Instance。

Vue app 都源於一個根節點，Vue Instance 則是透過 Vue Constructor (建構式) 產生的物件，他具備哪些初始資料、方法、掛載到哪個 DOM 等設定，都可以透過 JSON 物件傳入。

const vm = new Vue({
	el: 'app',             /* 掛載點 */
	data: { /* ... */ },   /* 初始資料 */
	methods: { /* ... */}, /* 方法 */
});

既然是透過 JSON 傳入，你可能會想把它拆出來。

const data = {
	user: 'ralph',
	role: 'developer'
};

const vm = new Vue({
	el: 'app',
	data: data
});

的確可以，你可以透過物件比較與賦值，測試看看特性是否相同

vm.role === data.role

vm.role = 'PM'
data.role

data.role = 'Developer
vm.role

乍看之下完全一樣，細看你可以發現，Vue 幫我們在原本的資料加了料。

/* 原本data */
{
	user: 'ralph',
	role: 'developer'
}

/* 加料後的vm.$data */
{
	__ob__: Observer,
	user: 'ralph',
	get user: function reactiveGetter(),
	set user: function reactiveSetter(newVal),
	/* ... */
	
}

當我們加上新屬性

data.level = 1

會發現賦值並沒有更新畫面。

Vue Instance 的 Reactivity 魔法源自這些「好料」，後面會更進一步說明原理。

另外幫你加了其他屬性和方法，都帶有$前綴的命名慣例，詳細可參考 官方API文件