Question

我意识到mounted和created是生命周期的钩子并尝试过它们。我也尝试在已安装中使用$nextTick，但这也无法获得准确的渲染。我正在尝试在初始渲染之后从dom节点中访问一些数据。这是我的代码的相关部分：

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

这给了我不正确的数据。但是，使用此代码：

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

请告诉我正确的数据。在我开始获取正确的数据之前，阈值大约是700-900毫秒。

问题1

为什么在所有内容都没有完全呈现时会调用生命周期？

问题2

它是否与尚未安装的兄弟组件有关，可能会推动尺寸？

问题3

是否有解决方案，我可以加入的事件基本上说，“页面上的所有内容都已呈现”＃39;。

我不喜欢我提出的setTimeout解决方案，原因很明显。

Answer 1

由于事物呈现异步，您可能无法确定该位置是否会发生变化。每次更新时你都可能需要获得这个位置。您可以使用custom directive执行此操作，在更新内容时将调用update函数。

这是一个小小的演示：

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>

Answer 2

Q1：生命周期钩子只关心实例本身而不是dom的其余部分。因此 - 当组件完全安装时，页面的其余部分可以处于挂起状态。

Q2：与Q1相同。

Q3：你可以用这个：

document.addEventListener("DOMContentLoaded", function(event) {
    console.log(this.$el.getBoundingClientRect().top);
});

更深入的回答：$(document).ready equivalent without jQuery

修改

你应该改用：

window.addEventListener("load", function(event) { console.log(this.$el.getBoundingClientRect().top); });

我忘记了外部资源。加载dom时会触发DOMContentLoaded，即。 HTML。加载外部资源后会触发load。进一步阅读：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Vue - 有什么办法可以完成渲染吗？

问题1

问题2

问题3

2 个答案: