关于vue组件的生命周期问题，我遇到这个问题怎么这么奇怪？？？

Question

在home.vue组件中
我有两个组件：detail.vue和edit.vue

在两个子组件的mounted函数中试图打印出各自的dom。但是结果却发生如下情况：

edit组件undefined，而detail组件可以正常打印，home组件也正确打印，这是为什么，

eidt和detail组件初始都是v-if='false',也就是说初始都是不显示的。这是为什么？

//home.vue中
<detail ref='detail' v-on:openedit='openEdit'></detail>
<edit ref='edit'></edit>

Answer 1

大概说一下~

vue 中 v-if 是不渲染到dom 也就所谓的html页面代码
当页面加载 数据挂载 也就是虚拟dom 与 dom 比对 形成渲染 所以 他没有得到 v-if的数据

当然你通过dom肯定无法获取到
至于打印出来如图确实是一个deail class 的 div 具体组件内部 并不了解 不详细说了~

Answer 2

vue只能通过el来判断有没挂接，记得哪个文档说过mounted只说明开始挂接DOM了，但并不一定已经完成挂接

Answer 3

自问自答吧，这个问题自己找了一上午算是找出个所以然了。
不知道在哪篇文档看到，vue每次只存在一个vue实例（不知道我说的准不准确），所以在home组件中，只有home这个实例，然后两个子组件可能是虚拟加载（按需加载），两个子组件都是v-if='false',所以这个时候是没有渲染到html模板中，所以通过dom访问是访问不到的。

图上能打印出detail,其实打印出的不是detail组件的dom结构，其实是home组件中的一个div,它的class='detail'

我说的不清楚，有大佬看到了可以说的明白点

Answer 4

v-show