v-for 渲染循环渲染页面的出现让我们告别了繁琐的JS拼接，在开发上面节省了很多时间。

• HTML 代码

    
  
     
{
   {item.age}}
    

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