有关数据无法渲染问题

Question

书架获取到用户信息传到 用户信息组件的时候发现，无法渲染出数据，调用updated钩子发现第一时间并没有数据，然后才有数据。我的解决办法是使用computed，所以这里想问问老师，是不是mpvue只调用了一次setData，但是这时候还没返回数据，所以导致了无法实时渲染数据，但是使用了computed之后它会再一次调用setData，所以才渲染出了数据。 有劳Sam老师解答

Answer 1

Sam 2019-12-16 22:25:36

你好，首先在界面渲染过程中，会调用一次 setData 更新 data 中的数据，并将界面刷新，之后我们通过：

this.xxx = xxx

上述代码会触发 Vue 的 __patch__ 方法，该方法中核心实现如下：

function updateDataToMP () {
  var page = getPage(this);
  if (!page) {
    return
  }
  var data = formatVmData(this);
  diffData(this, data);
  throttleSetData(page.setData.bind(page), data);
}

最后一个方法 throttleSetData 会调用 setData 方法，并触发小程序界面重绘，大致原理就是这样，所以只要使用 this.xxx = xxx 这样的语法就可以触发界面重新渲染了

• 提问者 RadiomM #1

  参数通过prop传过去有可能出现第一时间没值的情况吗。就是异步请求数据。

Answer 2

提问者 RadiomM 2019-12-16 22:53:08

参数通过prop传过去有可能出现第一时间没值的情况吗。就是异步请求数据。

• Sam #1

  这个完全有可能的，因为 props 中参数的初始化时机是在初次渲染时，此时接口还没请求到数据呢，所以自然是没有值的，所以需要做好非空判断哈

• 提问者 RadiomM 回复 Sam #2

  好的。谢谢Sam老师。点赞哦