每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的：

var vm = new Vue({
    // 選項
})

當創建一個 Vue 實例時，你可以傳入一個選項對象,就如前面所提到的如:data,methods,computed,watch等等。
一個 Vue 應用由一個通過 new Vue 創建的根 Vue 實例，以及可選的嵌套的、可復用的組件樹組成。舉個例子，一個 todo 應用的組件樹可以是這樣的：

根實例Root
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics
 

我們會在稍後的組件系統章節具體展開。

數據和方法

只要是包含在Vue實例中的屬性都是響應式的。當這些屬性的值發生改變時，視圖將會產生“響應”，即匹配更新為新的值。

// 我們的數據對象
var data = { a: 1 }

// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
  data: data
})

// 獲得這個實例上的屬性
// 返回源數據中對應的字段
vm.a == data.a // => true

// 設置屬性也會影響到原始數據
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

當這些數據改變時，視圖會進行重渲染。值得註意的是只有當實例被創建時 data 中存在的屬性才是響應式的。

當然，可以不對屬性進行響應式追蹤，Object.freeze()，這會阻止修改現有的屬性，也意味著響應系統無法再_追蹤_變化。

var obj = {
    foo: ‘bar‘
}

Object.freeze(obj)

new Vue({
    el: ‘#app‘,
    data: obj
})

除了數據屬性，還暴露了實例的屬性和方法，他們都有前綴$,如$set,$delete,$watch,以便於用戶自定義的屬性區分開來。
這些屬性方法在下節述說。可以查看官方API

生命周期

跟其他語言實例對象一樣，Vue實例也有自己的生命周期。

• beforeCreate //實例剛創建，為監視或配置屬性，事件，只進行了new操作
• created //創建實例已經完成，並完成了屬性的監視和事件配置
• beforeMount //模板編譯之前，未掛載，數據還未顯示到視圖已依舊為模板{{}}
• mounted //模板編譯之後，已經掛載，渲染頁面，顯示數據
• beforeUpdate //組件更新之前執行
• updated //組件更新之後執行
• beforeDestroy //組件銷毀之前執行
• destroyed //組件銷毀，清理它與其它實例的連接，解綁它的全部指令及事件監聽器
  舉個案例：

  <div id="app">
  message:{{msg}}
  <br/>
  <button @click="changeMsg">修改message屬性</button><br/>
  <button onclick="destory()">銷毀實例</button>
  </div>

var vm = new Vue({
        el:‘#app‘,
        data:{
            msg:‘this is Vue Test‘
        },
        methods:{
            changeMsg(){
                this.msg = ‘此章節為Vue2.0筆記——Vue實例‘;
            }
        },
        beforeCreate(){
            alert(‘組件實例剛剛創建，還未進行數據觀測和事件配置‘);
        },
        created(){  //常用！！！
            alert(‘實例已經創建完成，並且已經進行數據觀測和事件配置‘);
        },
        beforeMount(){
            alert(‘模板編譯之前，還沒掛載‘);
        },
        mounted(){ //常用！！！
            alert(‘模板編譯之後，已經掛載，此時才會渲染頁面，才能看到頁面上數據的展示‘);
        },
        beforeUpdate(){
            alert(‘組件更新之前‘);
        },
        updated(){
            alert(‘組件更新之後‘);
        },
        beforeDestroy(){
            alert(‘組件銷毀之前‘);
        },
        destroyed(){
            alert(‘組件銷毀之後‘);
        }

    })
    function destory(){
        vm.$destroy();
    }

當執行完畢後，更新會自動觸發，銷毀後，無法更改值。

在其中created函數和mounted函數是較為常用的鉤子函數
另外:不要在選項屬性或回調上使用箭頭函數
比如 created: () => console.log(this.a) 或 vm.$watch(‘a‘, newValue => this.myMethod())。因為箭頭函數是和父級上下文綁定在一起的，this 不會是如你所預期的 Vue 實例，經常導致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。

如果此文章未能讓您更明白，請參考Vue實例與生命周期

Vue2.0筆記——Vue實例