Javascript Vue已装入getBoundingClientRect（）。高度为0

我试图以编程方式创建Vue组件实例，但遇到了一些问题

var vm=新的Vue({
数据：{
mes:“你好，vue”
},
模板：“{mes}}”，
安装的（）{
console.log（this.el.getBoundingClientRect（）.height）//获取0
这个.$nextTick（（）=>{
console.log（this.el.getBoundingClientRect（）.height）//获取高度
})
}
}).$mount（）
document.body.appendChild（vm.$el）

我的问题:

根据关于vue生命周期的文档，应该在“创建

vm.$el

并用它替换“el”之后调用mounted hooks函数。所以我认为mountedhooks函数应该在document.body append

vm.$el

之后调用。事实上，它是在

vm.$mount（）之后调用的

为什么

this.$el.getBoundingClientRect（）.height

如果不是，则获取0 放入vm.$nextTick函数

据我所知，

$nextTick

函数创建了microtask，而浏览器UI渲染应该是一个宏任务。所以我不知道 如果在$nextTick函数中，为什么会得到正确的高度。
DOM高度应在放入页面（I）后计算 平均值

document.body.appendChild（vm.$el）

）？
我认为微任务在宏任务之前得到处理，所以即使在

$nextTick

函数中，我们也不应该得到正确的高度。但确实如此。我想知道为什么

---

问题是，当您调用

mount

时，您没有告诉它在哪里安装

$el

。在到达

document.body.appendChild（vm.$el）

之前，将调用

mounted

钩子，而

$nextTick

将在后面调用

您不应该亲自将

$el

附加到DOM中。改为将HTML更改为具有合适的目标元素，例如：

在这里，我插入了一个

，作为

的第一个子元素，紧跟在

之前，以确保在运行

中的代码之前元素存在

然后使用

el:'#app'

或将

mount（）

调用更改为

mount（'#app'）

装载Vue实例。这一部分可能是解释（我的重点）：

在装入实例后调用，其中el被新创建的vm替换。$el。如果根实例被装载到一个in-document元素，那么当调用mounted时，vm.$el也将在文档中

注意，已安装并不保证所有子组件也已安装。如果要等待整个视图渲染完成，可以在mounted中使用vm.$nextTick

关于

$nextTick（）

：

将回调延迟到下一个DOM更新周期之后执行。在更改某些数据以等待DOM更新后立即使用它

因此，要么您有一个子组件，要么您调用

getBoundingClientRect（）

另请参见

注意此位->

如果要等到整个视图呈现完毕，可以使用vm.$nextTick in of mounted: