屬性與方法：
每個 Vue 實(shí)例都會代理其data對象里所有的屬性：
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 設(shè)置屬性也會影響到原始數(shù)據(jù)
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
注意只有這些被代理的屬性是響應(yīng)的，也就是說值的任何改變都是觸發(fā)視圖的重新渲染。如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會觸發(fā)視圖更新。我們將在后面詳細(xì)討論響應(yīng)系統(tǒng)。
除了data屬性， Vue 實(shí)例暴露了一些有用的實(shí)例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的data屬性區(qū)分。例如：
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 (newVal, oldVal) {
// 這個回調(diào)將在 `vm.a` 改變后調(diào)用
})
注意，不要在實(shí)例屬性或者回調(diào)函數(shù)中（如 vm.$watch('a', newVal => this.myMethod())）使用箭頭函數(shù)。因?yàn)榧^函數(shù)綁定父級上下文，所以this不會像預(yù)想的一樣是 Vue 實(shí)例，而且this.myMethod是未被定義的。
關(guān)于聲明周期鉤子：
生命周期圖示
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "monkeyWang is boy"
},
beforeCreate: function () {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 創(chuàng)建完畢狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 掛載前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 掛載結(jié)束狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 銷毀完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
生命周期小結(jié)：
類實(shí)例化的過程中，構(gòu)造函數(shù)執(zhí)行的不同階段
- beforecreate : 可以在這加個loading事件，在加載實(shí)例時觸發(fā)
- created : 初始化完成時的事件寫在這里，如在這結(jié)束loading事件，異步請求也適宜在這里調(diào)用
- mounted : 掛載元素，獲取到DOM節(jié)點(diǎn)
- updated : 如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù)
- beforeDestroy : 可以做一個確認(rèn)停止事件的確認(rèn)框
- nextTick : 更新數(shù)據(jù)后立即操作dom
