昨天在用vue開發項目的時候遇到一個坑，在群友的探討中，成功的解決了這一問題。

具體情形如下：使用vue開發，在頁面中有一個人數統計組件，人數統計是要動態變化數據的，由于目前沒有真實數據，那么我想的是用隨機數和setInterval來改變data里面的數據，從而做到數據實時變化，這樣方便與我來做數字翻頁動畫。

代碼如下：

<template>  <div class="totel-number">    <div class="panel-top">      <div class="panel-top_Left"></div>      <div class="panel-top_Text flex-center" >數量</div>      <div class="panel-top_Right"></div>    </div>    <div class="panel-body">      <div class="counter-wrap">        <ul class="counter-board">          <li class="num-board" v-for="item in totelNumber">            <span class="num u">              <i class="w">{{item}}</i>            </span>            <span class="num b">              <i class="w">{{item}}</i>            </span>          </li>        </ul>      </div>    </div>    <i class="cc-Corner cc-C-t cc-C-l"></i>    <i class="cc-Corner cc-C-t cc-C-r"></i>    <i class="cc-Corner cc-C-b cc-C-r"></i>    <i class="cc-Corner cc-C-b cc-C-l"></i>  </div></template>

<script>import $ from 'jquery'import * as d3 from 'd3';export default {  data(){    return {      totelNumber: new Array(8)    }  },  beforeMount() {     //設置定時器，每3秒刷新一次     var self = this;     setInterval(getTotelNumber,1000)     function getTotelNumber() {       for(let i=0; i < self.totelNumber.length; i++){         self.totelNumber[i] = Math.ceil(Math.random()*10) -1        }     }     getTotelNumber();     }}</script>

大家有發現問題嗎？

在beforeMount里面console.log(this.totelNumber)會發現數據是在變化的，但是頁面上是沒有任何變化。

這是什么原因呢？

方法：先把問題分解開，就懷疑的幾個點做正反的驗證

在多次驗證在多次驗證和查看文檔后強哥找到了：

需要注意的是有兩種情況不會觸發視圖更新，需要換種變通寫法：

- 當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue
- 當你修改數組的長度時，例如： vm.items.length = newLength

更具這個思路我就明白了為什么會有這樣的坑，然后就將代碼進行了改進：

<script>import $ from 'jquery'import * as d3 from 'd3';export default {  data(){    return {      totelNumber: new Array(8)    }  },  beforeMount() {     //設置定時器，每3秒刷新一次     var self = this;     setInterval(getTotelNumber,1000)     function getTotelNumber() {       let newArray = new Array(8)       for(let i=0; i < this.totelNumber.length; i++){        newArray[i] = Math.ceil(Math.random()*10) -1      }      self.totelNumber = newArray     }     getTotelNumber();     }}</script>