mounted 钩子函数

Question

执行到 mounted 函数时，已经进过 _render _update 了。dom 已经添加到页面中了（子组件先执行钩子,在父组件执行）。那为什么文档的详细描述的（下面截图红框中） 有点不太理解呀。

我记得之前黄老师的音乐课程代码中也有用到下面这样一段函数！

mounted() {
    setTimeout(() => {
      // code....
    }, 20)
  },

Answer 1

ustbhuangyi 2019-05-13 10:09:33

我的理解是它不能保证 DOM 完全渲染完毕，比如不能保证正确获得内部的 DOM 的宽高，音乐课程的 setTimeout 20 现在已经可以替换成 this.$nextTick 了。
但是 mounted 的钩子执行顺序，在同步渲染的组件中，确实是先子后父。

• 提问者 Arey_jy #1

  黄老师，这种case 是在很多层组件嵌套下，当最底层的子组件触发 mounted 钩子函数时，获取最外面的 id 元素宽高时，获取不到是这样吗

• ustbhuangyi 回复 提问者 Arey_jy #2

  情况比较复杂，有些时候你是可以在 mounted 钩子函数中加 debugger，等浏览器执行到这里的时候，看一下 DOM 是否渲染了。

• 提问者 Arey_jy 回复 ustbhuangyi #3

  我有尝试过简单的例子，在 child2 组件钩子中debugger 时候，父级的 dom 已经添加到了页面中了。template:`<div id="app"><child> <child2 /> </child></div>`

点开查看后面6条评论