Vue基礎教程之條件渲染和列表渲染
目錄
- 前言
- 1.1 作用
- 1.2 控制元素顯隱的方式
- 1.3 初始渲染對比
- 1.4 切換消耗對比
- 1.5 使用場景對比
- 1.6 其他
- 2 v-if 和 v-for
- 2.1 v-if 和 v-for 不能同時用的原因
- 2.2 v-if 和 v-for 一起用的解決方案
- 3 列表渲染的 key 有什麼用
- 總結
前言
什麼是條件渲染？在我們的頁面中會有很多這樣的應用場景，比如說我們今天要上架一個活動，這個活動頁面只在今天有效，在晚上的24點或者說在明天早上凌晨0點1秒的時候就要把這個頁面下下來，把這個圖片隱藏掉。如果我們安排一個運維兄弟手動去改HTML，那麼運維兄弟就會瘋掉的，其實這裡就會有一個很簡單的辦法，就是條件的渲染，即當0點的時候我們去判斷這個條件，如果這個條件達到了比如說24點或者是0點一個時間點，之後就把它隱藏起來，這個就是一個條件的渲染。
什麼是列表渲染呢？這個就是最常見的，比如說在頁面上有很多個元素，很多的圖片，像新聞一次載入20條，如果用手敲去寫HTML，那樣新聞網站的人就不用去幹活了，每天就去敲HTML程式碼了，這裡面就會有類似於我們C語言程式碼裡面的for迴圈那樣，有一個迴圈語句在這個地方，讓我們把這個頁面的元素構建出來生成出來，這就是列表渲染。1 v-if 和 v-show
1.1 作用
都用來控制元素的顯示和隱藏
1.2 控制元素顯隱的方式
v-if控制虛擬DOM樹上元素的建立和銷燬，的響應系統會根據虛擬DOM樹對實際DOM進行更新，從而間接控制實際DOM上元素的顯隱
v-show通過給元素新增樣式display:none來讓元素隱藏
1.3 初始渲染對比
v-if是惰性的，如果初始渲染條件為false，什麼都不做；只有條件為true，才會開始編譯
v-show不管初始渲染條件如何，元素始終被編譯並保留，之後根據條件通過切換
1.4 切換消耗對比
如果頻繁切換顯示與隱藏，v-if會頻繁建立、銷燬元素，而v-show只是切換樣式
故v-if的切換消耗更高
1.5 使用場景對比
如果元素的顯示隱藏在一開始就定下來不會再變了，使用v-if
如果元素需要頻繁切換顯隱，使用v-show
1.6 其他
- v-if可以搭配template使用，v-show不可以
- v-if可以搭配v-else，v-show無特殊語法
2 v-if 和 v-for
2.1 v-if 和 v-for 不能同時用的原因
為什麼不能把v-if和v-for同時用在同一個元素上？
當 Vue 處理指令的時候，v-for的優先順序比v-if高，因此這個模板：
<ul>
<li v-for="item in list" v-if="item.isActive" :key="item.id">
{{item.name}}
</li>
</ul>
會經過如下運算：
this.list.map(function(item) {
if (item.isActive) {
return item.name
}
})
我們每次重新渲染的時候都要遍歷整個列表，即使isActive為true的item很少，這會帶來效能方面的極大浪費，因此兩者不能同時用在同一個元素上
2.2 v-if 和 v-for 一起用的解決方案
1、如果想控制整個列表的顯隱，可以將v-if移動到容器元素上，比如：
<body>
<div id="example">
<ul v-if="listShow">
<li v-for="item in activeItems" :key="item.id">{{item.name}}</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#example",data: {
list: [
{ id: 1,name: "路飛",isActive: true },{ id: 2,name: "索隆",isActive: false },{ id: 3,name: "山治",],listShow: false,}
});
</script>
2、如果想過濾列表中的專案，可以使用計算屬性(compuwww.cppcns.comted)返回過濾後的列表，比如：
<body>
<div id="example">
<ul>
<li v-for="item in activeItems" :key="item.id">{{item.name}}&www.cppcns.comlt;/li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#example",},computed: {
activeItems: function () {
return this.list.filter((item) => item.isActive);
},});
</script>
3 列表渲染的 key 有什麼用
在使用v-for進行列表渲染時，必須給元素新增一個key屬性，並且這個key必須是唯一標識
<ul>
<li v-for="item in list" :key="item.id">{{item.name}}</li>
</ul>
我們知道，Vue 在更新元素時，不會直接操作真實DOM（渲染真實DOM開銷是很大的），而是根據新資料生成新的虛擬 DOM，然後對新舊虛擬DOM進行差異對比，根據對比結果進行DOM操作來更新檢視
列表渲染時，如果有keysykkjQNZSy屬性，由於它是唯一標識，在對比兩個新舊節點時若key不同也就沒有深入對比的必要了。
為什麼不能用index作為key？因為index是不穩定可變的，比如刪除了列表第一個元素，會導致後面的元素index發生變化，從而導致key發生變化。這時，Vue 在對比新舊節點時，遇到key相同的節點，就會進行深入對比，發現節點內容http://www.cppcns.com發生了變化，就會去建立新的真實DOM用來替換原來的真實DOM。原本只需要刪除真實DOM中第一個元素的操作，會變成新建、替換後續所有真實DOM，造成效能的極大浪費
總結
到此這篇關於Vue基礎教程之條件渲染和列表渲染的文章就介紹到這了,更多相關Vue條件渲染和列表渲染內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！