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

在 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渲染完的生命钩子,应该怎么解决这个问题?

回答:

在数据请求的回调中使用nextTick,在nextTick的回调里试试~

回答:

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

回答:

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注