背景
最近在重新复习 vue 的源码,对官方文档中一句话产生疑问,原话:
注意mounted
不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在mounted
内部使用vm.$nextTick
疑问
虽然以前做项目写代码的时候都会谨记在mounted中(如果要对DOM操作)加入 $nextTick
,但现在仔细想想好像多此一举。
- 原话的“子组件也一起挂载”中的“挂载”指的就是
mounted
,那么除了异步组件还有什么条件会出现该情况呢?看源码后我的理解是:patch
是深度递归、同步的一个过程,理论上父组件mounted
了子组件也必定已经触发了mounted
,不会出现上述的情况。 - 排除掉异步组件,读源码可知在
patch
过程的最后一步(这之前已经生成了用于插入文档的vnode.elm
,且已执行了真实的DOM元素插入语句),会调用invokeInsertHook
触发所有组件对应的mounted
钩子(从子到父)。那理论上在mounted
钩子中我们直接去操作对应生成的DOM
应该是绝对安全的没错吧?DOM的修改不是同步的吗? - 至于后面文档提到如果要等整个视图都渲染完毕,加上
$nextTick
即可解决,强调是只是如果要等整个视图真正渲染到显示屏上的时候才做额外处理是吧?因为渲染(render)过程是异步的?
补充
当然在挂载后手动去操作数据,然后立马操作DOM是不符合预期的,因为update
是一个异步的过程。以上的疑问仅仅是针对初始的挂载操作。可能我对文档描述本身和源码的阅读存在误解,望指出。
不敢说正确,我跟你探讨一下啊。