--- title: Vue 實例 type: guide order: 3 --- ## 構造器 每個 Vue.js 應用的起步都是通過構造函數 `Vue` 創建一個 **Vue 的根實例**： ``` js var vm = new Vue({ // 選項 }) ``` 一個 Vue 實例其實正是一個 [MVVM 模式](https://en.wikipedia.org/wiki/Model_View_ViewModel)中所描述的 ViewModel - 因此在文檔中經常會使用 `vm` 這個變量名。 在實例化 Vue 時，需要傳入一個**選項對象**，它可以包含數據、模板、掛載元素、方法、生命周期鉤子等選項。全部的選項可以在 API 文檔中查看。 可以擴展 `Vue` 構造器，從而用預定義選項創建可復用的**組件構造器**： ``` js var MyComponent = Vue.extend({ // 擴展選項 }) // 所有的 `MyComponent` 實例都將以預定義的擴展選項被創建 var myComponentInstance = new MyComponent() ``` 盡管可以命令式地創建擴展實例，不過在多數情況下將組件構造器注冊為一個自定義元素，然后聲明式地用在模板中。我們將在后面詳細說明組件系統。現在你只需知道所有的 Vue.js 組件其實都是被擴展的 Vue 實例。 ## 屬性與方法 每個 Vue 實例都會**代理**其 `data` 對象里所有的屬性： ``` js var data = { a: 1 } var vm = new Vue({ data: data }) vm.a === data.a // -> true // 設置屬性也會影響到原始數據 vm.a = 2 data.a // -> 2 // ... 反之亦然 data.a = 3 vm.a // -> 3 ``` 注意只有這些被代理的屬性是**響應的**。如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。我們將在后面詳細討論響應系統。 除了這些數據屬性，Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 `$`，以便與代理的數據屬性區分。例如： ``` js var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // -> true vm.$el === document.getElementById('example') // -> true // $watch 是一個實例方法 vm.$watch('a', function (newVal, oldVal) { // 這個回調將在 `vm.a` 改變后調用 }) ``` 參考 API 文檔查看全部的實例屬性與方法。 ## 實例生命周期 Vue 實例在創建時有一系列初始化步驟——例如，它需要建立數據觀察，編譯模板，創建必要的數據綁定。在此過程中，它也將調用一些**生命周期鉤子**，給自定義邏輯提供運行機會。例如 `created` 鉤子在實例創建后調用： ``` js var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 實例 console.log('a is: ' + this.a) } }) // -> "a is: 1" ``` 也有一些其它的鉤子，在實例生命周期的不同階段調用，如 `compiled`、 `ready` 、`destroyed`。鉤子的 `this` 指向調用它的 Vue 實例。一些用戶可能會問 Vue.js 是否有“控制器”的概念？答案是，沒有。組件的自定義邏輯可以分割在這些鉤子中。 ## 生命周期圖示 下圖說明了實例的生命周期。你不需要立馬弄明白所有的東西，不過以后它會有幫助。