vue.js中怎么利用v-for循環實現渲染

本篇文章為大家展示了vue.js中怎么利用v-for循環實現渲染，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一、簡介

vue.js 的循環渲染是依賴于 v-for 指令，它能夠根據 vue 的實例里面的信息，循環遍歷所需數據，然后渲染出相應的內容。它可以遍歷數組類型以及對象類型的數據，js 里面的數組本身實質上也是對象，這里遍歷數組和對象的時候，方式相似但又稍有不同。

（一）遍歷對象

<div id="app">
  <ul>
    <li v-for="(val, key, index) in me">{{index}}. {{key}}: {{val}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    me: {
      name: 'Dale',
      age: 22,
      sex: 'male',
      height: 170
    }
  }
});

這里，v-for 接收的參數相對較復雜，但是可以分為三個部分：

（1）括號及其內的遍歷結果信息（val, key, index）

其中，val 是遍歷得到的屬性值，key 是遍歷得到的屬性名，index 是遍歷次序，這里的 key/index 都是可選參數，如果不需要，這個指令其實可以寫成 v-for="val in me"；

（2）遍歷關鍵詞 in

in 可以使用 of 替代，官方的說法是“它是最接近 JavaScript 迭代器的語法”，但其實使用上并沒有任何區別；

（3）被遍歷對象 me

me 是綁定在實例 data屬性上的一個屬性，實際上，它是有一個執行環境的，也即是我們接觸最多的 vue 實例，模板中，我們仍舊可以像在 methods 以及計算屬性中一樣，通過 this 訪問到它，這里的 me 其實就相當于 this.me，模板中直接寫 this.me 也是可行的。

渲染結果如下：

<div id="app">
  <ul>
    <li>0. name: Dale</li>
    <li>1. age: 22</li>
    <li>2. sex: male</li>
    <li>3. height: 170</li>
  </ul>
</div>

（二）遍歷數組

<div id="app">
  <ul>
    <li v-for="(item, index) in items">{{index}}. {{item}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    items: ['apple', 'tomato', 'banana', 'watermelon']
  }
});

和遍歷對象相類似，最大的不同點在于對象的 “key” 和 “index” 是一致的，所以這里我們只需要取一個 index 即可，上面代碼的渲染結果如下：

<div id="app">
  <ul>
    <li>0. apple</li>
    <li>1. tomato</li>
    <li>2. banana</li>
    <li>3. watermelon</li>
  </ul>
</div>

（三）遍歷“整數”

理論上來說，整數并不是一個可遍歷的單元，但是 vue 這里相當于給我們提供了一個方便方式來減少重復代碼。

<div id="app">
  <ul>
    <li v-for="n in num">{{n}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    num: 3
  }
});

渲染結果如下：

<div id="app">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

二、實際應用

（一）對象、數組 & 組件

實際應用過程中，我們單獨使用數組或者對象去描述我們的數據的情況很少，更常見的模式是結合了數組和對象兩部分內容：

<div id="app">
   <ul class="persons">
    <li v-for="person in persons">name: {{person.name}}, age: {{person.age}};</li>
  </ul> 
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    persons: [
      {
        name: 'Dale',
        age: 22
      }, 
      {
        name: 'Tim',
        age: 30
      },
      {
        name: 'Rex',
        age: 23
      }
    ]
  }
});

本質上是遍歷的一個數組，但是數組的每個元素卻是一個對象，也就是上面的 person，我們可以通過 [] 以及 . 兩種方式去訪問這個對象的屬性，比如這里的 name / age，渲染結果如下：

<div id="app">
  <ul class="persons">
    <li>name: Dale, age: 22;</li>
    <li>name: Tim, age: 30;</li>
    <li>name: Rex, age: 23;</li>
  </ul>
</div>

實際上，更加常用且強大的模式，是使用組件與數組/對象進行組合，操作方式與上面相類似。

（二）與 v-if 組合

添加了 v-for 指令的標簽，實際上也可以同時添加 v-if 指令，但值得注意的是，v-for 的優先級更高，渲染模板時，相當于對每次遍歷的結果進行了一次條件判斷。

<div id="app">
   <ul class="persons">
    <li v-for="person in persons" v-if="person.age >= 23">name: {{person.name}}, age: {{person.age}};</li>
  </ul> 
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    persons: [
      {
        name: 'Dale',
        age: 22
      }, 
      {
        name: 'Tim',
        age: 30
      },
      {
        name: 'Rex',
        age: 23
      }
    ]
  }
});

這里先遍歷了 persons 的所有元素，然后檢查每次得到的 person 的是否大于或等于 23，是則輸出，否則不輸出，渲染結果如下：

<div id="app">
  <ul class="persons">
    <li>name: Tim, age: 30;</li>
    <li>name: Rex, age: 23;</li>
  </ul>
</div>

如果要讓 v-if 指令的優先級更高，可以考慮在 v-for 指令所綁定的標簽的父級上添加 v-if 指令。

三、注意事項

（一）key

與 v-for 一樣，在不綁定 key 屬性的情況下，vue 默認會重用元素以提高性能，如果不需要它的默認行為，顯式綁定一個唯一的 key 即可。

（二）數據 -> 視圖更新

vue 的視圖更新是依賴于 getter/setter 的，如果直接修改、增加、刪除數組元素，并不會觸發視圖的更新。這里 vue 重寫了如下方法：

• push

• pop

• shift

• unshift

• splice

• sort

• reverse

當通過它們修改數據的時候，將會觸發視圖的更新。

new Vue({
  data: {
    arr: [1, 2, 3]
  }
});

比如上面這種情況，如果我們想要在執行 arr 的 push 等方法，因為 push 是數組類型數據從 Array.prototype.push 繼承過來的，所以我們一般情況下有兩種實現方式。

（1）修改 Array.prototype

Array.prototype.push = function () {
  console.log(1);
}
([]).push();        // 1

這里我們修改了 Array.prototype 上的 push 方法，但是實際上，整個 prototype 屬性都可以被重寫，如 Array.prototype = xxx，這樣做的好處很明顯，在這一處進行修改，之后所有的數組類型都可以直接使用這個重寫后的方法，實現和使用都非常簡單；但是這樣帶來的副作用也特別明顯，容易影響到其它的代碼，其它使用這段代碼的地方，除了功能實現上可能受到影響外，效率上也會有較大影響，原生 js 的代碼都是經過特殊優化的，我們重寫實現，效率肯定會受到影響，最重要的是，如果大家的代碼在同一個環境下運行，然后都嘗試重寫同一個方法的話，最終結果不言而喻。

（2）增加自有方法

var arr = [];

arr.push = function () {
  console.log(1);
}

arr.push();         // 1
Array.prototype.push.toString();  // "function push() { [native code] }"

這里修改了 arr 的 push 方法， 但是并不涉及 Array.prototype.push，因為讀寫一個對象的屬性/方法的時候，js 總是先嘗試訪問 “ownproperty”，也就是 “hasOwnProperty” 所檢測的內容，這里我們姑且將其稱為“自有屬性（方法）”。讀取數據的時候，如果沒有讀取到內容，那么 js 會嘗試向上搜索 __proto__ 上的數據；寫數據的時候，如果有這個自有屬性，則會將其覆蓋，如果沒有，則將其作為自有屬性添加到改對象上，而不會嘗試將其添加到 __proto__ 上，這樣的規則，也是為了防止“子類”以外修改“父類”的屬性、方法等。這種實現方式雖然可以避免上面修改 Array.prototype 的一系列缺點，但是它的問題就更加明顯，因為每次創建這樣一個“數組”，就要重新實現/綁定這樣一系列方法，它所帶來的開發效率、性能問題不容小覷。

（3）vue 的實現方式

var arr = [];
new Vue({
  data: {
    arr: arr
  }
});

arr.push.toString();    // "function mutator() {var arguments$1 = arguments;... 這是 vue 自己的實現
Array.prototype.push.toString();   // "function push() { [native code] }"... 這是瀏覽器原生的實現
arr.hasOwnProperty('push');      // false 說明不是自有屬性

以上說明 vue 既不是修改了 Array.prototype.push，又不是修改了自有屬性。但我們通過 instanceof 操作符檢查的時候，arr 又是 Array 的一個實例,那么它到底是怎么弄的實現的呢？或者說 vue 的 push 藏在哪兒呢？

var base = [];
var arr = [];

base.push = function () {
  console.log(1);
};
arr.__proto__ = base;
arr.push();     // 1
arr.__proto__.push(); // 1
arr.__proto__.push.toString(); // "function push() { [native code] }"

實際上，vue 是利用了類似上面的方式，先創建了一個 Array 的實例，也就是一個數組類型的基礎對象 base，然后為它添加了一個自有方法 push，最后用 base 覆蓋了需要擴展的 arr 對象的 __proto__ 屬性。

這里需要重寫 push 等方法的數組，我們只需要將其 __proto__ 指向 base 數組，在讀新創建的數組的 push 的時候，發現它并沒有這樣一個自有方法，那么它就嘗試讀 __proto__ 上的方法，發現 __proto__ 屬性（也即 base 數組）上有這樣一個自有方法，那么它就不必再向上搜索而直接使用 base.push。

通過這種方式，我們不必為每一個數組重寫一遍 push 方法，也不必去修改 Array.prototype ，看起來倒像是一個兩全其美的方法。

上述內容就是vue.js中怎么利用v-for循環實現渲染，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。