在 vue.js 2 中，在插槽渲染后测量组件的高度

Question

我正在寻找一种方法来读取组件的插槽呈现后（在 DOM 中）的高度（clientHeight），然后将结果设置为反应数据以进行进一步计算。

根据 updated 钩子的文档：

The component’s DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here

...在那之前没问题，但文档还指出：

However, in most cases you should avoid changing state inside the hook

... 好像不禁止在updated hook中设置reactive数据

结果非常不稳定，有时我在插槽渲染后得到 clientHeight，有时在它们渲染之前得到

似乎 'updated' 钩子在适当的时候被调用，但是改变这个钩子中的反应数据不能系统地工作。

Answer 1

Vue.nextTick(() => {
  this.height = this.$el.clientHeight;
});

In vue.js 2, measure the height of a component once slots are rendered