完整原文地址見簡(jiǎn)書http://www.reibang.com/p/695bf35fa466
本文內(nèi)容提要
條件渲染
v-if與v-show控制渲染的機(jī)制的區(qū)別v-if與v-show各自的適用場(chǎng)景v-if與v-else的配合 控制渲染v-if糯俗、v-else-if與v-else的配合 控制渲染列表循環(huán)渲染
v-for例程（數(shù)組方式）
v-for例程（Object方式 --- 注意參數(shù)順序！Ｄ览蕖５孟妗）注意使用
Key值優(yōu)化v-for的性能通過數(shù)組的變更函數(shù) 更新渲染列表UI
通過 直接用
新數(shù)組替換更新原數(shù)組更新渲染列表UI通過改變 數(shù)組內(nèi)容（元素） 更新渲染列表UI
循環(huán)Object對(duì)象，增加Object對(duì)象內(nèi)容顿仇，渲染更新UI
使用
v-for遍歷一個(gè)數(shù)字特性“
v-for的優(yōu)先級(jí)高于v-if”淘正，其引發(fā)的相關(guān)問題 及其 規(guī)避方法
- 案例
- 解決方案
- 使用
<template>UI占位符進(jìn)行優(yōu)化
條件渲染
v-if與v-show控制渲染的機(jī)制的區(qū)別
當(dāng)它們的參數(shù)值是true時(shí)摆马，毫無疑問對(duì)應(yīng)的組件便是展示的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show: true
}
},
template: `
<div v-if="show">luelueluelielielie</div>
<div v-show="show">Bye Bye！：柽骸囤采！</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
效果：
當(dāng)它們的參數(shù)值是
false時(shí)，v-if通過 直接暴力去除對(duì)應(yīng)DOM組件的形式 “隱藏”組件惩淳，而
v-show則通過style="display: none;"樣式的配置 隱藏組件：
<script>
const app = Vue.createApp({
data() {
return {
show: false
}
},
template: `
<div v-if="show">luelueluelielielie</div>
<div v-show="show">Bye Bye＝短骸！思犁！</div>`
});
const vm = app.mount('#heheApp');
</script>
v-if與v-show各自的適用場(chǎng)景
基于以上的隱藏組件的機(jī)制代虾，
頻率較低地隱藏組件的場(chǎng)景，兩者都差不多激蹲，
不想占用過多DOM資源的話棉磨，可以考慮使用v-if;
v-show適用于頻率較高的隱藏組件的場(chǎng)景；
v-if與v-else的配合 控制渲染
上例程：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show: true
}
},
template: `
<div v-if="show">luelueluelielielie</div>
<div v-if="show">if text</div>
<div v-else>else text</div>
<div v-show="show">Bye ByeＭ信弧：亍！</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
首先项郊，注意v-if與v-else兩個(gè)指令修飾的兩個(gè)組件
一定要是成對(duì)出現(xiàn)的馅扣，放在一起前后兩行銜接的，
不然容易出錯(cuò)或報(bào)錯(cuò)着降；
接著差油，v-if與v-else兩個(gè)指令修飾的兩個(gè)組件，
同一時(shí)間只會(huì)出現(xiàn)一個(gè)任洞，
由v-if指定綁定的字段蓄喇，v-else不需要指定；
字段為true時(shí)交掏，v-if修飾的組件顯示妆偏，
字段為false時(shí)，v-else修飾的組件顯示：
v-if盅弛、v-else-if與v-else的配合 控制渲染
即如普通編程的邏輯钱骂，
v-if綁定字段為true時(shí)候，只顯示v-if修飾的組件挪鹏，
否則见秽，
v-else-if綁定字段為true時(shí)候，只顯示v-else-if修飾的組件讨盒，
再否則解取，
只顯示v-else修飾的組件；
<script>
const app = Vue.createApp({
data() {
return {
show: false,
conditionOne: false,
conditionTwo: true
}
},
template: `
<div v-if="show">luelueluelielielie</div>
<div v-if="conditionOne">if text</div>
<div v-else-if="conditionTwo">else-if text</div>
<div v-else>else text</div>
<div v-show="show">Bye Bye７邓场Ｙ骺唷蔓肯！</div>`
});
const vm = app.mount('#heheApp');
</script>
列表循環(huán)渲染
v-for例程（數(shù)組方式）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['Otoman', 'Wang', 'program']
}
},
template: `
<div>
<div v-for="(item, index) in listArray">
{{item}} --- {{index}}
</div>
</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
v-for例程（Object方式 --- 注意參數(shù)順序！Ｂ字摇Ｊ『恕）：
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['Otoman', 'Wang', 'programmer'],
listObject: {
firstName: 'Otoman',
lastName: 'wang',
job: 'programmer'
}
}
},
template: `
<div>
<div v-for="(value, key, index) in listObject">
{{value}} --- {{key}} --- {{index}}
</div>
</div>`
});
const vm = app.mount('#heheApp');
</script>
注意使用Key值優(yōu)化v-for的性能
當(dāng)使用v-for做循環(huán)渲染，盡量加一個(gè)每一項(xiàng)都唯一的Key值昆码，
這樣下次新增元素的時(shí)候气忠，
Vue底層發(fā)現(xiàn) 其Key值在數(shù)據(jù)更新前后都沒變的DOM項(xiàng)，
就會(huì)直接復(fù)用這個(gè)DOM項(xiàng)赋咽，而不用重建這個(gè)DOM項(xiàng)旧噪，
達(dá)到優(yōu)化性能的目的；
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['Otoman', 'Wang', 'programmer'],
listObject: {
firstName: 'Otoman',
lastName: 'wang',
job: 'programmer'
}
}
},
template: `
<div>
<div v-for="(item, index) in listArray" :key="index">
{{item}} --- {{index}}
</div>
</div>`
});
const vm = app.mount('#heheApp');
</script>
通過數(shù)組的變更函數(shù) 更新渲染列表UI
本質(zhì)其實(shí)就是借助 原生JS數(shù)組的 API對(duì)數(shù)據(jù)進(jìn)行更新脓匿，
再借助Vue的數(shù)據(jù)與UI的雙向綁定特性淘钟，
完成對(duì)UI的更新渲染：
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['Otoman', 'Wang', 'programmer'],
listObject: {
firstName: 'Otoman',
lastName: 'wang',
job: 'programmer'
}
}
},
methods: {
handleAddBtnClick() {
this.listArray.push('hello');
},
handleDeleteBtnClick() {
this.listArray.pop();
},
handleShiftBtnClick() {
this.listArray.shift();
},
handleUnShiftBtnClick() {
this.listArray.unshift('hello');
},
handleSpliceBtnClick() {
//實(shí)際上就是 JS數(shù)組 原生的API的用法
this.listArray.splice(2,0,'lalala');
// this.listArray.splice(2,1,'lalala');
// this.listArray.splice(2,3,'lalala');
},
handleUnSortBtnClick() {
this.listArray.sort();
},
handleReverseBtnClick() {
this.listArray.reverse();
}
},
template: `
<div>
<div v-for="(item, index) in listArray" :key="index">
{{item}} --- {{index}}
</div>
<div>
<button @click="handleAddBtnClick">在末尾新增節(jié)點(diǎn)</button>
<button @click="handleDeleteBtnClick">刪除末尾節(jié)點(diǎn)</button>
</div>
<div>
<button @click="handleShiftBtnClick">刪除開頭的節(jié)點(diǎn)</button>
<button @click="handleUnShiftBtnClick">在開頭新增節(jié)點(diǎn)</button>
</div>
<div>
<button @click="handleSpliceBtnClick">插入或替換部分的節(jié)點(diǎn)</button>
<button @click="handleSortBtnClick">排序節(jié)點(diǎn)</button>
<button @click="handleReverseBtnClick">反轉(zhuǎn)節(jié)點(diǎn)</button>
</div>
</div>`
});
const vm = app.mount('#heheApp');
</script>
效果圖如下，
這里由于功能比較繁多而簡(jiǎn)單陪毡，就不做詳細(xì)操作了：
