1. 計(jì)算屬性
- vs模板表達(dá)式
模板只能處理簡(jiǎn)單運(yùn)算,在模板中多次引用應(yīng)該使用計(jì)算屬性computed - vs methods
結(jié)果相同,但是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,只有相關(guān)依賴發(fā)生改變時(shí)它們才會(huì)重新求值圈暗;每當(dāng)觸發(fā)重新渲染時(shí),調(diào)用方法將總會(huì)再次執(zhí)行函數(shù) - vs watch
監(jiān)聽(tīng)屬性watch代碼重復(fù) - 計(jì)算屬性的getter
計(jì)算屬性默認(rèn)只有g(shù)etter裕膀,因?yàn)橐话銥檎故驹卦贝部梢蕴峁﹕etter
2. 監(jiān)聽(tīng)器
watch選項(xiàng)響應(yīng)數(shù)據(jù)的變化,當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷比較大的操作時(shí)使用昼扛。
3. 用key管理可復(fù)用元素
Vue會(huì)復(fù)用已有元素寸齐,而非從頭開(kāi)始渲染,不同input框會(huì)共享已輸入的內(nèi)容,想要表達(dá)兩個(gè)元素是完全獨(dú)立的渺鹦,不要復(fù)用他們扰法,添加對(duì)應(yīng)唯一的key值
4. v-if vs v-show
- v-if
切換過(guò)程中條件塊中的事件監(jiān)聽(tīng)器和子組件會(huì)被銷毀和重建;直到條件第一次為真時(shí)才會(huì)渲染條件塊毅厚,更高切換開(kāi)銷 - v-show
不管初始條件是什么迹恐,條件塊總會(huì)被渲染,并且只是簡(jiǎn)單地基于CSS進(jìn)行切換卧斟,更高初始開(kāi)銷
5. v-for優(yōu)先級(jí)比v-if高
v-if可以重復(fù)運(yùn)行于每個(gè)v-for循環(huán)中殴边,可以選擇性地渲染節(jié)點(diǎn)
<ul>
<li v-for="todo in todos" v-if="!todo.isComplete">color</li>
</ul>
6. 數(shù)組變更檢測(cè)
數(shù)組的變異方法,可以觸發(fā)視圖更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
數(shù)組的非變異方法珍语,總是返回一個(gè)新數(shù)組锤岸,可以用新數(shù)組替換舊數(shù)組
- filter()
- map()
- concat()
由于js的限制,Vue不能檢測(cè)以下變動(dòng)的數(shù)組:
- 使用索引值設(shè)置數(shù)組項(xiàng)目
vm.items[index] = newValue
---> Vue.set(vm.items, index, newValue) - 修改數(shù)組的長(zhǎng)度
vm.length = newLengh
---> vm.splice(newLengh)