創(chuàng)建一個 Vue 實(shí)例
每個 Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個新的 Vue 實(shí)例開始的：
JS
var vm = new Vue({
// 選項
})
雖然沒有完全遵循 MVVM 模型稽鞭，但是 Vue 的設(shè)計也受到了它的啟發(fā)壳鹤。因此在文檔中經(jīng)常會使用
vm(ViewModel 的縮寫) 這個變量名表示 Vue 實(shí)例抖苦。
當(dāng)創(chuàng)建一個 Vue 實(shí)例時洋侨，你可以傳入一個選項對象矾瑰。這篇教程主要描述的就是如何使用這些選項來創(chuàng)建你想要的行為。作為參考酵镜，你也可以在 API 文檔 中瀏覽完整的選項列表碉碉。
一個 Vue 應(yīng)用由一個通過 new Vue 創(chuàng)建的根 Vue 實(shí)例，以及可選的嵌套的淮韭、可復(fù)用的組件樹組成垢粮。舉個例子，一個 todo 應(yīng)用的組件樹可以是這樣的：
根實(shí)例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
我們會在稍后的組件系統(tǒng)章節(jié)具體展開靠粪。不過現(xiàn)在蜡吧，你只需要明白所有的 Vue 組件都是 Vue 實(shí)例粱腻，并且接受相同的選項對象 (一些根實(shí)例特有的選項除外)。
數(shù)據(jù)與方法
當(dāng)一個 Vue 實(shí)例被創(chuàng)建時斩跌，它向 Vue 的響應(yīng)式系統(tǒng)中加入了其 data 對象中能找到的所有的屬性。當(dāng)這些屬性的值發(fā)生改變時捞慌，視圖將會產(chǎn)生“響應(yīng)”耀鸦，即匹配更新為新的值。
JS
// 我們的數(shù)據(jù)對象
var data = { a: 1 }
// 該對象被加入到一個 Vue 實(shí)例中
var vm = new Vue({
data: data
})
// 獲得這個實(shí)例上的屬性
// 返回源數(shù)據(jù)中對應(yīng)的字段
vm.a == data.a // => true
// 設(shè)置屬性也會影響到原始數(shù)據(jù)
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
當(dāng)這些數(shù)據(jù)改變時啸澡，視圖會進(jìn)行重渲染袖订。值得注意的是只有當(dāng)實(shí)例被創(chuàng)建時 data 中存在的屬性才是響應(yīng)式的。也就是說如果你添加一個新的屬性嗅虏，比如：
JS
vm.b = 'hi'
那么對 b 的改動將不會觸發(fā)任何視圖的更新洛姑。如果你知道你會在晚些時候需要一個屬性，但是一開始它為空或不存在皮服，那么你僅需要設(shè)置一些初始值楞艾。比如：
JS
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
這里唯一的例外是使用 Object.freeze()，這會阻止修改現(xiàn)有的屬性龄广，也意味著響應(yīng)系統(tǒng)無法再追蹤變化硫眯。
JS
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
HTML
<div id="app">
<p>{{ foo }}</p>
<!-- 這里的 `foo` 不會更新！ -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
除了數(shù)據(jù)屬性择同，Vue 實(shí)例還暴露了一些有用的實(shí)例屬性與方法两入。它們都有前綴 $，以便與用戶定義的屬性區(qū)分開來敲才。例如：
JS
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一個實(shí)例方法
vm.$watch('a', function (newValue, oldValue) {
// 這個回調(diào)將在 `vm.a` 改變后調(diào)用
})
以后你可以在 API 參考中查閱到完整的實(shí)例屬性和方法的列表裹纳。
實(shí)例生命周期鉤子
每個 Vue 實(shí)例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽紧武、編譯模板剃氧、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運(yùn)行一些叫做生命周期鉤子的函數(shù)阻星，這給了用戶在不同階段添加自己的代碼的機(jī)會她我。
比如
created鉤子可以用來在一個實(shí)例被創(chuàng)建之后執(zhí)行代碼：
JS
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實(shí)例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的鉤子，在實(shí)例生命周期的不同階段被調(diào)用迫横，如
mounted番舆、updated和destroyed。生命周期鉤子的this上下文指向調(diào)用它的 Vue 實(shí)例矾踱。
注意:
不要在選項屬性或回調(diào)上使用箭頭函數(shù)恨狈，比如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。因為箭頭函數(shù)是和父級上下文綁定在一起的呛讲，this不會是如你所預(yù)期的 Vue 實(shí)例禾怠，經(jīng)常導(dǎo)致Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function之類的錯誤返奉。
生命周期圖示
在此舉個例子
8個生命周期的用法以及介紹
//生命周期函數(shù)就是vue實(shí)例在某一個時間點(diǎn)會自動執(zhí)行的函數(shù)
//生命周期函數(shù)可以直接放到vue實(shí)例中，其他函數(shù)必須放在methods
var vm=new Vue({
el:"#app",
beforeCreate:function () { //當(dāng)創(chuàng)建vue實(shí)例時會調(diào)用此函數(shù)
console.log("beforeCreate");
},
created:function () { //如果沒有template就會把實(shí)例中的整體當(dāng)做template吗氏，<div id="app">hello world</div>標(biāo)簽以及內(nèi)容
console.log("created");
},
beforeMount:function () { //模板和數(shù)據(jù)結(jié)合瞬間調(diào)用此函數(shù)
console.log("beforeMount");
},
mounted:function () { //hello world顯示到瀏覽器上就會自動執(zhí)行
console.log("mounted")
},
beforeDestroy:function () { //當(dāng)mv.$destroy()消除實(shí)例 即將銷毀時執(zhí)行
console.log("beforeDestroy")
},
destroyed:function () { //銷毀后執(zhí)行
console.log("destroyed");
},
beforeUpdate:function () { //當(dāng)數(shù)據(jù)發(fā)生改變 渲染前執(zhí)行
console.log("beforeUpdate");
},
updated:function () { //當(dāng)數(shù)據(jù)被重新渲染后執(zhí)行
console.log("updated");
}
});
