v-for 襯着輪迴襯着頁面的湧現讓我們告別了煩瑣的JS拼接，在開闢上面節省了許多時候。
近期在開闢中發現了在某些特定狀況下，湧現了獵取不到襯着出來的DOM元素的狀況，緣由身為小白的我臨時還沒搞清楚（忘大佬指出），然則卻得出來開端的解決方案。

• HTML 代碼

<div id="app">
  <li v-for="item in abc" :name="{{item.name}}">{{item.age}}</li>
</div>

• JS 代碼（錯誤代碼）

// 錯誤代碼示例一
var vm = new Vue({
    el: '#app',
    data: {
        abc: new Object()
    },
    mounted: function () {
        this.getList();
        var li = document.querySelectorAll('li');
        console.log(li.length);     // 輸出0
    },
    methods: {
        getList: function () {
             var data = [
                 { name: '1', age: '21' },
                 { name: '2', age: '22' },
                 { name: '3', age: '23' },
                 { name: '4', age: '24' },
                 { name: '5', age: '25' }
             ];
             this.$set(this, 'abc', data);
         }
    }
}) 

// 錯誤代碼示例二
var vm;
window.onload = function(){
    vm = { ... } // 實例化代碼如上，去除 mounted 生命周期
    vm.getList();
    var li = document.querySelectorAll('li');
    console.log(li.length);     // 輸出0
}

上述代碼中的 li 等於經由過程 v-for 襯着天生，然則兩種體式格局獵取 li 輸出的長度都為0。

終究發現將數據初始化放到 beforeMount 內里即可在 mounted 內里準確輸出獵取到 li 元素的長度。

• JS 代碼（解決方案）

// 解決方案一（數據初始化放在掛載之前）
var vm = new Vue({
    el: '#app',
    data: {
        abc: new Object()
    },
    beforeMount: function(){
         this.getList();
    },
    mounted: function () {
         var li = document.querySelectorAll('li');
         console.log(li.length)     // 輸出5
    },
    methods: {
        getList: function () {
             var data = [
                 { name: '1', age: '21' },
                 { name: '2', age: '22' },
                 { name: '3', age: '23' },
                 { name: '4', age: '24' },
                 { name: '5', age: '25' }
             ];
             this.$set(this, 'abc', data);
       }
    }
}) 

// 解決方案二（mounted周期內里運用VUE自帶鈎子函數$nextTick做處置懲罰）
mounted: function () {
    this.getList();
    this.$nextTick(function () {
          var li = document.querySelectorAll('li');
          console.log(li.length)  // 輸出 5
    })
}