vue 如何保证数据更新完 和 dom渲染完

Question

在 vue 中用到一个选择器插件， 需要保证数据更新完（数据通过异步请求） 并且 Dom 渲染完， 我在插件的实例化代码写在数据请求的回调里，显示 dom 没有渲染完，我把插件的实例化写在mounted生命钩子里，但是此时数据还没请求过来

mounted () {
    /**
     * 植入选择器插件
     */
    this.$nextTick(() => {
      // 执行此代码时，this.data是空数组 
      this.data.forEach((val) => {
        val.data.forEach((val2) => {
          if (!val2.id) {
            /* eslint-disable no-new */
            new SpacePicker({
              inputId: val2.id,
              data: val2.data,
              success: function (arr) {
                console.log('success');
              }
            });
          }
        });
      });
    });
  }

请问如何解决这个问题， vue 有没有保证数据更新完 和 dom渲染完的生命钩子，应该怎么解决这个问题？

Answer 1

在数据请求的回调中使用nextTick，在nextTick的回调里试试～

Answer 2

之前也遇到过DOM渲染不完全的情况 最后我的解决方式是在nextTick中加入一个定时器 但是感觉不是很好。
但是你这里数据访问不到不是这个原因 对数据的操作应该放在请求数据成功的回调里面 。

Answer 3

你加个判断，if(this.data!==[]||this.data!==null){执行代码}，这判断可能不全面，思路就是得到数据后再执行你要做的事。

Answer 4

很简单，利用JS的单线程机制，把插件的实例化写在请求的回调里，并用setTimeout把插件的实例化部分包裹起来，不用加时间，默认为0就可以

Answer 5

让我想起一个场景：一个列表页用到了better-scroll滚动插件，列表数据由父组件发送请求后得到，然后传递给子组件来渲染列表和执行初始化滚动插件。由于axios请求耗时不稳定，如果在mouted中的$nexyTick中执行，有也概率导致this.$refs.id获取不到值而报错。
在网上有很多类似的问题情况，我先也踩过坑，用过setTimeout，也用过updated。
目前我使用的方案是：在watch中监听数据，然后在methods中定义一个方法，方法中再使用this.$nextTick来确保this.$refs.id能取到值。页面各方法的时间戳如图：