有关数据无法渲染问题

来源：12-8 书架用户面板组件开发

RadiomM

2019-12-16

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

写回答

2回答

Sam

2019-12-16

已采纳

你好，首先在界面渲染过程中，会调用一次 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

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

2019-12-17

共1条回复