[toc]
![](https://cn.vuejs.org/images/lifecycle.png)
## 子父组件谁先触发mounted?
子组件的`mounted`会先触发,然后父组件的`mounted`再触发(但这**并不**代表父组件的dom后生成)
## 数据渲染是异步的
我们在子组件中改变要渲染的数据
![](https://box.kancloud.cn/9d23af476e4b9a4b6b17f3f7d8071ca4_531x552.png)
在父组件的mounted并不能及时的拿到重新渲染后的元素
![](https://box.kancloud.cn/94e42659e62cbc628f5166ad00d6c90e_478x287.png)
![](https://box.kancloud.cn/50da48cfc031c0047db2978c0d6db9cf_680x351.png)
因为数据渲染是异步的,而当我们在子组件的mounted中改变数据后立马就会执行父组件的mounted,但此时数据还并没有开始渲染
故为了解决上面的问题
想要操作dom,最后在mounted时候使用时,加一个nextTick
- 空白目录
- vue-cli
- runtime-only
- Vue对比React
- 组件与实例
- data-binding
- computed的set和get
- scoped
- 事件
- 自定义指令
- 插件
- keep-alive
- $nextTick与生命周期
- 路由
- Vue.use(Router)
- this.$router编程式导航
- this.$route
- new Router
- routes
- mode
- linkClass
- scrollBehavior
- query
- fallback
- base
- router-view
- router-link
- 路由守卫
- 左右切换
- 滚动
- FAQ
- vuex
- 适用
- new Vuex.Store
- state
- mutations
- getters
- actions
- strict
- plugins
- modules
- namespace
- this.$store
- commit
- dispatch
- mapXX
- eventBus
- Vue工程相关
- 引用路径的简化
- css-module
- vue-loader
- 异步加载
- 支持jsx
- 让webpack支持对vuex的热替换
- .eslintrc