今天來看兩對(duì) cp扒最，之所以把他們當(dāng) cp赏殃，是因?yàn)槊看螌懫渲兄粫r(shí)，總是要拿另一個(gè)做比較场仲，這種關(guān)系在前端很常見和悦。
基本上是看起來好像實(shí)現(xiàn)的功能點(diǎn)是一樣的，但實(shí)際上每個(gè)都有其特殊的應(yīng)用場(chǎng)景燎窘。彼此互為補(bǔ)充摹闽，缺了誰，都有點(diǎn)不大對(duì)勁褐健。
今天來介紹的兩對(duì)是：
- methods && computed
- v-if && v-show
先來看第一對(duì)付鹿，methods && computed 是創(chuàng)建 Vue 實(shí)例時(shí)可以選擇的字段，和 el蚜迅， data 是同一類的舵匾。
兩者的關(guān)系有一種既生瑜何生亮的感覺。
在比較之前先看一個(gè) computed 的個(gè)人問題谁不。
為何計(jì)算屬性寫的時(shí)候是函數(shù)坐梯，用的時(shí)候當(dāng)成屬性【不加小括號(hào)】來操作？
假設(shè)接下來用到的 data 為：
data: {
firstName: 'cem',
lastName: 'coe'
}
現(xiàn)在要在頁面中展示完整的名字刹帕，可以使用的方式：
- 雙大括號(hào)語法 {{firstName + lastName}} 語法過于繁瑣
- methods
- computed
使用計(jì)算屬性：
computed: {
fullName() {
return this.firstName + this.lastName
}
}
在 html 中使用時(shí)可能是這樣的：
<h1>{{fullName}}</h1>
為什么不加小括號(hào)呢吵血？它不是函數(shù)嗎？
這里其實(shí)是計(jì)算屬性的簡寫偷溺，完整的寫法：
computed: {
fullName: {
set: function() {
},
get: function() {
return this.firstName + this.lastName
}
}
}
計(jì)算屬性本質(zhì)上就是一個(gè)屬性蹋辅，并非函數(shù)，只是開發(fā)時(shí)一般不實(shí)現(xiàn) set 方法挫掏。只是簡寫以后給人一種函數(shù)的感覺侦另。
這也就解釋了為何計(jì)算屬性寫的時(shí)候是函數(shù)，用的時(shí)候當(dāng)成屬性來操作。
那么接下進(jìn)入正題褒傅，來看一下這對(duì) cp 的異同弃锐。
這里做一個(gè)對(duì)比實(shí)驗(yàn)，methods && computed 在頁面中均搞 3 次殿托。
<div id="app">
{{fullName}}
{{fullName}}
{{fullName}}
---
{{getFullName()}}
{{getFullName()}}
{{getFullName()}}
</div>
為了看到結(jié)果在它們身上埋點(diǎn) console
methods: {
getFullName() {
console.log("methods")
return this.firstName + this.lastName
}
},
computed: {
fullName() {
console.log("computed")
return this.firstName + this.lastName
}
}
從結(jié)果來看霹菊，同樣請(qǐng)求三次數(shù)據(jù)的情況下， methods 執(zhí)行3次碌尔，而 computed 僅僅執(zhí)行1次浇辜。
在 firstName 和 lastName 不改改變時(shí)，computed 會(huì)使用緩存的結(jié)果唾戚，效率更高柳洋，更加節(jié)省資源。
其實(shí)兩者之中還有一個(gè)第三者叹坦，喚為 watch熊镣，他們之間錯(cuò)綜復(fù)雜的關(guān)系找時(shí)間再寫。
來看第二對(duì) v-if && v-show,募书，兩者用于條件渲染绪囱。
通過一個(gè)對(duì)比實(shí)驗(yàn)來看一看 v-if && v-show 的區(qū)別，為了看清結(jié)果莹捡，給他們埋下 id：
<h1 v-if="isShow" id="if">cemcoe</h1>
<h1 v-show="isShow" id="show">cemcoe</h1>
當(dāng) isShow 的值被改成 false 時(shí)鬼吵，兩個(gè)都消失。但他們不一樣篮赢，通過觀察埋下的 id 可以發(fā)現(xiàn)：v-if 直接從 DOM 中刪掉齿椅，v-show 增加了行內(nèi)樣式 display:none，僅僅是視覺不可見启泣。
v-show 更像是一件隱身斗篷涣脚。元素仍然存在，只是不可見寥茫。
在 CSS 中有類似的問題：display:none 和 visibility:hidden 的異同遣蚀。又給自己挖了一個(gè)坑，有空填纱耻。
開發(fā)中 v-if 使用較多芭梯，向服務(wù)器請(qǐng)求數(shù)據(jù)僅僅加載有權(quán)限的內(nèi)容，如果沒有權(quán)限就不能將數(shù)據(jù)添加到 DOM 中弄喘。
這里是連載 化學(xué)小子的前端實(shí)驗(yàn)冊(cè) 的第 18 篇粥帚，歡迎關(guān)注。
