Vue - 有什么办法可以配合渲染完成吗? [英] Vue - is there any way to tie into render being finished?

问题描述

我知道 mounted 和 created 是生命周期钩子，并且已经尝试过.我也试过在 mount 内使用 $nextTick 并且这也无法获得准确的渲染.我目前正在尝试从 dom 节点 初始渲染之后访问一些数据.这是我的代码的相关部分:

mounted() {console.log(this.$el.getBoundingClientRect().top);},

这给了我错误的数据.但是，使用此代码:

mounted() {setTimeout(() => {console.log(this.$el.getBoundingClientRect().top);}, 1000)},

是否为我提供了正确的数据.在我开始获取正确数据之前，阈值大约是 700-900 毫秒.

问题 1

当一切都没有完全呈现时，为什么生命周期会被调用?

问题 2

这是否与尚未完全安装的兄弟组件有关，这可能会推动尺寸?

问题 3

有没有解决方案，一个我可以挂钩的事件，基本上说，页面上的所有内容都已呈现".

我不喜欢我出于显而易见的原因提出的 setTimeout 解决方案.

解决方案

由于事物是异步呈现的，您可能无法确定位置不会改变.每次更新时，您可能都需要获取该位置.您可以使用 自定义指令来做到这一点，其update 函数将在事物更新时调用.

这是一个小演示:

new Vue({el: '#app',数据: {ht: 100,顶部:空},指令:{边界(el，绑定，vnode){vnode.context[binding.expression] = el.getBoundingClientRect().top;}},安装(){让时间 = 5;const i = setInterval(() => {this.ht += 10;如果 (--times <1) {clearInterval(i);}}, 1000);}});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script><div id="应用程序"><div :style="{height: `${ht}px`}">嗨</div><div v-bounding="top">{{top}}</div>

I'm aware of mounted and created being life cycle hooks and have tried them. I've also tried using $nextTick within mounted and that does not work to get an accurate render either. I am currently trying to access some data out of a dom node after the initial render. Here's the pertinent part of my code:

mounted() {
  console.log(this.$el.getBoundingClientRect().top);
},

This is giving me incorrect data. However, using this code:

mounted() {
  setTimeout(() => {
    console.log(this.$el.getBoundingClientRect().top);
  }, 1000)
},

Does net me the correct data. The threshold is about ~700-900 ms before I start getting the correct data.

Question 1

Why is the lifecycle invoke when everything hasn't fully rendered?

Question 2

Does it have to do with sibling components that haven't quite mounted yet that might be pushing dimensions?

Question 3

Is there a solution, an event that I can hook into that basically says, 'everything on the page has rendered'.

I don't love the setTimeout solution that I came up with for obvious reasons.

解决方案

Due to the fact that things render asynchronously, you may not be able to be sure that the position isn't going to change. You will likely need to get the position every time something updates. You can do that with a custom directive, whose update function will be called when things update.

Here's a little demo:

new Vue({
  el: '#app',
  data: {
    ht: 100,
    top: null
  },
  directives: {
    bounding(el, binding, vnode) {
      vnode.context[binding.expression] = el.getBoundingClientRect().top;
    }
  },
  mounted() {
    let times = 5;
    const i = setInterval(() => {
      this.ht += 10;
      if (--times < 1) {
        clearInterval(i);
      }
    }, 1000);
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div :style="{height: `${ht}px`}">Hi</div>
  <div v-bounding="top">{{top}}</div>
</div>

这篇关于Vue - 有什么办法可以配合渲染完成吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！