子组件的 mounted 为什么会在 父组件 mounted 之前 执行

Question

假设一个场景：

子组件 mounted 执行完，视图已经更新且渲染完，但是父组件还没有 mounted 执行完；

引出问题：

父组件没有更新且渲染完，子组件已经更新且渲染完，子组件此时可以操作dom了吗？如果可以为什么？不应该先有父在有子吗？

附我对声明周期理解图：

Answer 1

慕斯0124373 2023-05-05 09:29:01

组件的创建过程是先父后子。在创建过程中，遇到子就创建子.。整个dom 树的创建是一个深度递归的过程，深度优先遍历，没有子了才会insert。所以 insert 的过程是先子后父，组件创建时先父后子。我是这么理解的

Answer 2

双越 2022-10-20 21:03:09

浏览器渲染是从 DOM 底层向上渲染的。

• aibo #1

  老师，看完这个问题我不太明白啊；
  浏览器渲染是从dom底层向上渲染 => 就是先渲染父组件(父节点)再渲染子组件；
  那就像这个问题，浏览器要先“渲染”父节点才去渲染子节点，但vue确实是子组件先完成了mounted状态，这不矛盾了吗；
  所以想请问老师，vue实例的这个“mounted”生命周期状态是不是指真正意义上的浏览器完成渲染的状态呢？（基础比较弱，这是我自己的一个疑惑，可能我这问题本身就存在问题吧）