Vue v-for渲染頁面，獲取不到DOM元素解析

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
    })
}