请教一下created，mounted，$nextTick的关系？

Question

网上搜了好久他们之间的关系，还是有点懵懵的：
1：我把this.$nextTick放在created里面和mounted里面有什么区别吗？
2：为什么$nectTick能保证子组件都加载完呐？

Answer 1

关于第一个问题：

对组件本身来说没区别。非说有有区别的话也就是你要两个里面都写 $nextTick，created 里那个会比 mounted 里的先触发。

如果有异步子组件的情况下，有点儿区别，下面会说。

---

关于第二个问题：

如果是同步子组件，mounted 就已经能保证了同步子组件都加载完了。因为对于一个页面来说，第一次 DOM 更新循环结束，也就是 mounted 的时候。

同步顺序是 parent created → child created → child mounted → child $nextTick → parent mounted → parent $nextTick。

如果是异步子组件，你需要在 mounted 里写 $nextTick，但也并不能完全保证子组件加载完毕，因为异步子组件里还可以再套异步孙子组件。

总而言之，同步子组件，写 created + $nextTick 和写 mounted 都行；异步子组件，除非是在父组件中直接操作异步子组件的生命周期钩子、或者子组件通过 $emit 的方式通知父组件，否则单纯靠父组件自己，是无法百分百保证的。

Answer 2

• created: 可以正常访问数据，此时还没渲染
• mounted: 组件初始化完成，可以访问dom
• $nextTick: 每次数据更新之后，渲染完毕的回调，如果没有渲染完毕，新增的或使用了v-if的dom通过this.$refs.xxx无法获取到

需要操做DOM的，放在this.$nextTick里；
不需要的，created、mounted看你自己喜欢；