VUE变量更新，页面数据不渲染的解决方案

开发过程中遇到这样一个问题，改变data下变量的值，页面没有重新渲染。

遇到这个问题的原因是渲染初期，该数据初始值为空，等到拿到接口数据的时候再赋值，页面居然不更新这个数据的值。

举个例子，我们要在页面上放一个倒计时的 N 天 N 时 N 分 的模块，初期我是这么做的

我们在data中设置这些数据初始值为’’

数据初始化

然后在页面当中调用数据

<div class="time" v-if="days">
    <b>{{days}}</b>    <span>天</span>
    <b>{{hours}}</b>    <span>时</span>
    <b>{{minutes}}</b>    <span>分</span>
    <b>{{seconds}}</b>    <span>秒</span>
</div>

然后进行赋值

this.days=arr[0];
this.hours=arr[1];
this.minutes=arr[2];
this.seconds=arr[3];

这样是不能够渲染出最新数据的，也就是说，渲染出的html中的数据还是空字符串’’

后来找到一个解决方案
data中初始化一个对象，用来盛放我们的数据

timeCount:{}, //倒计时显示时间

赋值时，这么做（也就是将days等数据放入timeCount对象中，当做对象的一个属性timeData下的属性来赋值）

// 属性更新不渲染解决方案
this.$set(this.timeCount,'timeData',{
    days: arr[0],
    hours: arr[1],
    minutes: arr[2],
    seconds: arr[3]
})

然后在页面中进行调用

<div class="time" v-if="timeCount.t">
  <b>{{timeCount.timeData.days}}</b>
  <span>天</span>
  <b>{{timeCount.timeData.hours}}</b>
  <span>时</span>
  <b>{{timeCount.timeData.minutes}}</b>
  <span>分</span>
  <b>{{timeCount.timeData.seconds}}</b>
  <span>秒</span>
</div>

就能够同步刷新最新的数据

以上为项目中遇到的关于这个问题的解决方案