一、初探條件渲染

vue 的條件渲染，仍舊依賴于指令系統(tǒng)，下面逐個介紹：

（1）v-if

<div id="app">
  <div v-if="c1">c1</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false
  }
});

當(dāng) c1 為真值的時候，渲染出 v-if 所綁定的元素，否則不渲染出該元素。渲染結(jié)果如下：

<div id="app"></div>

（2）v-else

<div id="app">
  <div v-if="c1">c1</div>
  <div v-else>c1 is not true</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false
  }
});

當(dāng) c1 為真值的時候，渲染 v-if 所綁定的元素，否則渲染 v-else 所綁定的元素。這里值得注意的是，在 Handlebars 模板引擎里面，else 可以和 each 所搭配，當(dāng)遍歷次數(shù)為0的時候，則渲染 else 塊所對應(yīng)的內(nèi)容；而對于 vue，官方給出的說法是，每個 v-else 所綁定語句必須綁定在 v-if 或者 v-else-if 語句的后面。一開始我還抱有一絲希望地去試了一下，結(jié)果。。。

遍歷次數(shù)為0的時候，v-else 綁定的元素沒有渲染出來，而且控制臺還報錯了。

個人感覺，在這一方面，vue 的模板引擎可能有所欠缺。雖然說，我們可以利用在循環(huán)中添加條件判斷實現(xiàn)相同的功能，但卻需要添加額外的代碼。

（3）v-else-if

<div id="app">
  <div v-if="c1">c1</div>
  <div v-else-if="c2">c2</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c1: false,
    c2: true
  }
});

這里先檢查 c1 是否為真值，是則渲染出 v-if 綁定的元素，否則檢查 c2 是否為真值，是則渲染出 v-else-if 所綁定的元素。如果 c1 / c2 都不為真值，則都不渲染。渲染結(jié)果如下：

<div id="app">
  <div>c2</div>
</div>

不難理解，v-if、 v-else、 v-else-if 跟類 C 語言中的 if、else、else if 功能相仿。

二、條件渲染優(yōu)化

除了提供跟類 C 語言中的 if、else、else if 相似的功能以外，vue 還為開發(fā)者提供了性能優(yōu)化方案。

（1）v-show

v-show 有著和 v-if 相似而又不同的功能，v-if 依賴于控制 DOM 節(jié)點，而 v-show 是依賴于控制 DOM 節(jié)點的 display 屬性。

<div id="app">
  <div v-show="c4">c4</div>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c4: false
  }
});

當(dāng) v-show 綁定的值為真值的時候，節(jié)點正常渲染；當(dāng)為假值的時候，節(jié)點仍舊渲染，但是添加了 style="display:none;"，將節(jié)點通過 CSS 的方式隱藏。渲染結(jié)果如下：

<div id="app">
  <div style="display: none;">c4</div>
</div>

相比于 v-if，v-show 其實不管在什么條件下，一開始都會進(jìn)行節(jié)點的渲染，而后續(xù)的狀態(tài)切換都是基于 CSS 實現(xiàn)的。針對狀態(tài)需要頻繁切換狀態(tài)的節(jié)點，v-show 相對于直接修改 DOM 節(jié)點的 v-if 有更好的性能。

然而，v-show 的缺點也是顯而易見的，不管初始條件如何，它都將進(jìn)行 DOM 節(jié)點的渲染，這對首屏加載優(yōu)化不一定是個好事情。

（2）key

在使用 v-if 等指令的時候，vue 會盡可能地復(fù)用已經(jīng)渲染的元素，而不是全部地重頭渲染。例如一對綁定 v-if 與 v-else 的元素，如果二者內(nèi)部 DOM 元素相同，則可能在所綁定數(shù)據(jù)改變時，只更新綁定了的屬性，其它通過用戶操作或者 JS 修改了的屬性將被保留。

<div id="app">
  <form>
    <div class="input-group" v-if="name">
      <label for="name">name:</label>
      <input type="text" name="name" placeholder="user name" />
    </div>

    <div class="input-group" v-else>
      <label for="email">email:</label>
      <input type="text" name="email" placeholder="email" />
    </div>

    <button v-on:click.prevent="toggle">toggle</button>
  </form>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    name: true
  },
  methods: {
    toggle: function () {
      this.name = ! this.name;
    }
  }
});

這里就是如此，點擊 toggle 按鈕的時候，v-if 所綁定的值會切換，相應(yīng)的，DOM 節(jié)點也會跟著切換，但是實際上，由于 vue 重用了 input 元素，切換的同時，用戶填寫的內(nèi)容并沒有被清空。同理，label 元素在切換的工程中，其實也只是修改了 for 屬性和元素內(nèi)的文字，并沒有銷毀原有 DOM 節(jié)點和生成新的 DOM節(jié)點。

但是 vue 做的這種優(yōu)化并不總是為人們所需要的，不需要它的時候，我們?yōu)檫@個元素添加一個唯一的 key 值就可以了。

<div id="app">
  <form>
    <div class="input-group" v-if="name">
      <label for="name">name:</label>
      <input type="text" name="name" placeholder="user name" key="name" />
    </div>

    <div class="input-group" v-else>
      <label for="email">email:</label>
      <input type="text" name="email" placeholder="email" key="email" />
    </div>

    <button v-on:click.prevent="toggle">toggle</button>
  </form>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    name: true
  },
  methods: {
    toggle: function () {
      this.name = ! this.name;
    }
  }
});

像這樣，為這兩個不需要“優(yōu)化”的 input 元素添加了唯一標(biāo)識的 key 以后，vue 便不會再復(fù)用這兩個元素。每次切換之后，修改的內(nèi)容將不會被保留。

三、更多思考

（1）基于標(biāo)簽的指令（v-bind 、v-if）

Handlebars 的 helpers 有自己獨立的語法，比如：

{{#if ok}}
 <h1>Yes</h1>
{{/if}}

它定義了一組自己的語法。而實現(xiàn)同樣的功能，vue 使用類似于 v-bind、v-if 之類的指令，它們都是綁定在一個個標(biāo)簽上面的，如

<h1 v-if="ok">Yes</h1>

這樣的語法更加簡潔、清晰。

Handlebars 的語法，支持同時綁定多個 DOM 節(jié)點。

{{#if ok}}
 <h1>Yes</h1>
 <h1>Yes</h1>
 <h1>Yes</h1>
{{/if}}

按照前面的思路，難道 vue 要實現(xiàn)成這樣？

<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>

那根本不可能，添加額外的 DOM 節(jié)點包裹住它們？那就更不可能。vue 擴(kuò)展了一個 template 節(jié)點，使用的時候，我們可以像 HTML 節(jié)點一樣去使用它，但是渲染頁面的時候，它不會被渲染在頁面上。于是，前面的代碼可以實現(xiàn)成這樣：

<template v-if="ok">
 <h1>Yes</h1>
 <h1>Yes</h1>
 <h1>Yes</h1>
</template>

想想，其實和 Handlebars 也差不多了，甚至顯得還要復(fù)雜些了，畢竟 template 這個單詞這么長~

（2）利用條件渲染字符串

前面說，v-if 等指令都是基于標(biāo)簽的，那如果我不想創(chuàng)建額外的標(biāo)簽，只是想按照條件去修改一個字符串呢？沒錯，你猜對了，template 節(jié)點，它里面除了可以存放節(jié)點，也可以直接存放字符串，就像這樣：

<div id="app">
  <template v-if="c3">text</template>
</div>
......
var app = new Vue({
  el: '#app',
  data: {
    c3: true
  }
});

渲染結(jié)果：

<div id="app">text</div>

這里其實也就是利用了 template 節(jié)點不會被渲染在頁面上的特性。

（3）屬性的“條件渲染”

既然 HTML 節(jié)點可以條件渲染，多個 HTML 節(jié)點可以條件渲染，HTML 節(jié)點內(nèi)字符串可以條件渲染，那么 HTML 屬性呢？在編寫模板的時候，HTML 屬性其實也是字符串，我們能想上面那樣，利用 template 模板創(chuàng)建字符串作為 HTML 的屬性嗎？

是不是一看就感覺怪怪的？vue 也這樣覺得，于是控制臺里就解析成了：

中間的 <template v-if='c3'>title content</template> 整個的被識別成了字符串，那如果去掉外面的雙引號呢？

好像看起來更奇怪了。最后的渲染結(jié)果：

<div title="<template">title content&gt;此處應(yīng)有 title</div>

vue 的模板解析不是簡單的依賴于字符串的解析，所以其實這里不能使用這種方法。正確的姿勢是利用 v-bind 指令：

<div v-bind:title="c3 ? 'title content' : '' ">title</div>

因為 v-bind 指令的預(yù)期值實際上可以接受 js 表達(dá)式的，這里我們傳入了一個條件表達(dá)式。當(dāng) c3 為真值的時候，渲染為 title="title content"，當(dāng) c3 為假值的時候，渲染為 title=""。

最新評論