vue的例項物件的資料選項及生命週期
一般來說，當模板內容較簡單時，使用data選項配合表示式就可，可如果邏輯比較複雜就需要用到methods,computed,watch等方法。
一、data
它是Vue例項的資料物件，Vue將會遞迴的將data屬性轉換為get/set，從而讓data屬效能響應資料的變化。Vue例項建立後不能直接訪問，而是要通過vm.$data來訪問原始資料物件，通過vm.$set/vm.$delete來操作物件。
<div id="app">
{{arr}}<br>
{{obj}}
</div>
<!-- 匯入vue.js -->
<script src="
computed: 計算屬性函式computed將被混入到Vue例項中，這樣可以將複雜的邏輯從模板計算中解脫出來，有利於程式碼的可維護性。特點：主要是根據已有屬性生成新的屬性；基於響應式依賴進行快取，this指向vm例項自己；它只有get方法。
如下例項，我們可以看到它聲明瞭一個revName的計算屬性，它雖然寫的一個方法，但revName代表的是它的返回結果。
<body>
<div id="app">
<h4>原始資料：{{name}}</h4>
<h4>反轉後資料：{{revName}}</h4>
<input type="
在上面的函式中，同步使用Vue變數，上面的寫法相當於寫了一個get函式，如果有需要我們可以將其寫完整。
<script>
let vm = new Vue({
data: {
num: 1
},
computed: {
//僅讀取，值為函式
add: function () {
return this.num + 1;
},
//讀取和設定
minus: {
get: function () {
return this.num - 2;
},
set: function (val) {
this.num = val - 3;
}
}
}
});
console.log(vm.minus);//-1
vm.minus = 10;
console.log(vm.num);//7
console.log(vm.add);//8
</script>
methods：methods中的this自動繫結為Vue的例項。它不存在快取，每次呼叫都編譯執行函式程式碼，它不能使用get，set，在表示式中可以通過呼叫方法達到和呼叫computed屬性一樣的顯示效果，一般是用於回撥函式。
<body>
<div id="app">
<h2>{{count}}</h2>
<button @click="add"> + </button>
<button @click="add(10,$event)"> +10 </button>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: { count: 0 },
methods: {
add(n) {
typeof n == "object" ? this.count++ : this.count += n;
}
}
});
</script>
watch：主要用於監聽vue例項已有屬性的變化（不管是data中的屬性還是computed中的屬性），對於不存在的屬性無法起作用，它可以在引數列表拿到變化的前一個物件和變化後的新物件，檢測物件深層次屬性的變化以及回撥函式是否立即觸發執行。
<body>
<div id="app">
<h4>這個人的全名是：{{fullName}}</h4>
<input type="text" v-model="firstName"><br>
<input type="text" v-model="lastNAame">
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
firstName: '',
lastNAame: '',
fullName: ''
},
watch: {
firstName(val) {
this.fullName = val + '·' + this.lastNAame;
},
lastNAame(val) {
this.fullName = this.firstName + '·' + val;
}
}
});
</script>
當然也可以用computed來例項上面的效果，程式碼如下：
<script>
let vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
},
computed: {
//注意fullName的位置
fullName() {
return this.firstName + '·' + this.lastName;
}
}
});
</script>
computed和watch的區別：
computed是計算屬性，它更多的是用於計算值的場景。它還具有快取性，computed的值在get執行後是可以時行快取的，只有在它依賴的屬性值改變後，下一次獲取computed的值時才會重新呼叫對應的get來進行計算。computed適用於比較消耗效能的計算場景
watch它更多的是觀看，偵別，類似於某些資料的監聽回撥，它沒有快取，頁面重新渲染時值不變化它也會執行。
所以當我們要進行資料計算且依賴於其它資料時，可以用computed。但如果在資料變化需要進行一些操作可以用watch。
二、生命週期
Vue例項在建立時有一系列的初始化步驟，如下例項生命週期示意圖。