計算屬性和偵聽器
計算屬性緩存 vs 方法
計算屬性是基于它們的響應式依賴進行緩存的微峰。只在相關響應式依賴發(fā)生改變時它們才會重新求值估蹄。相比之下窟却，每當觸發(fā)重新渲染時剖笙，調(diào)用方法將總會再次執(zhí)行函數(shù)软驰。
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在組件中涧窒，調(diào)用方法求值
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
計算屬性的 setter
計算屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
現(xiàn)在再運行 vm.fullName = 'John Doe' 時碌宴，setter 會被調(diào)用杀狡，vm.firstName 和 vm.lastName 也會相應地被更新。
偵聽器
當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時贰镣，這個方式是最有用的呜象。
Class 與 Style 綁定
在將 v-bind 用于 class 和 style 時，Vue.js 做了專門的增強碑隆。表達式結果的類型除了字符串之外恭陡，還可以是對象或數(shù)組。
對象語法
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
數(shù)組語法
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
條件渲染
v-if
v-if 是“真正”的條件渲染上煤，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建休玩。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊拴疤。
key
Vue 會盡可能高效地渲染元素永部，通常會復用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非衬欧快之外苔埋，還有其它一些好處。例如蜒犯，如果你允許用戶在不同的登錄方式之間切換：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
那么在上面的代碼中切換 loginType 將不會清除用戶已經(jīng)輸入的內(nèi)容组橄。因為兩個模板使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder罚随。
這樣也不總是符合實際需求玉工，所以 Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”淘菩。只需添加一個具有唯一值的 key 屬性即可遵班。
列表渲染
v-for
當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略瞄勾。如果數(shù)據(jù)項的順序被改變费奸，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序， 而是簡單復用此處每個元素进陡，并且確保它在特定索引下顯示已被渲染過的每個元素愿阐。
為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點的身份趾疚，從而重用和重新排序現(xiàn)有元素缨历，你需要為每項提供一個唯一 key 屬性：
<div v-for="item in items" v-bind:key="item.id">
<!-- 內(nèi)容 -->
</div>
建議盡可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內(nèi)容非常簡單糙麦，或者是刻意依賴默認行為以獲取性能上的提升辛孵。
對象、數(shù)組更改檢測注意事項
Vue 不能檢測以下變動
1.當你利用索引直接設置一個項時赡磅，例如：
vm.items[indexOfItem] = newValue
解決方法：
vm.$set(vm.items, indexOfItem, newValue)
2.當你修改數(shù)組的長度時魄缚，例如：vm.items.length = newLength
解決方法：
vm.items.splice(newLength)
3.Vue 不能檢測對象屬性的添加或刪除
解決方法：
vm.$set(vm.userProfile, 'age', 27)
//有時你可能需要為已有對象賦予多個新屬性。在這種情況下焚廊，你應該用兩個對象的屬性創(chuàng)建一個新的對象冶匹。
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
v-for with v-if
不推薦同時使用 v-if 和 v-for。
而如果你的目的是有條件地跳過循環(huán)的執(zhí)行咆瘟，那么可以將 v-if 置于外層元素 (或 <template>)上嚼隘。如：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
組件
1.因為組件是可復用的 Vue 實例，所以它們與 new Vue 接收相同的選項袒餐，例如 data飞蛹、computed谤狡、watch、methods 以及生命周期鉤子等卧檐。僅有的例外是像 el 這樣根實例特有的選項墓懂。
2.一個組件的 data 選項必須是一個函數(shù)，因此每個實例可以維護一份被返回對象的獨立的拷貝
