萌新求罩, 关于单个组件的生命周期的调用情况在网上已有很多文章写有, 那我主要探索多个组件情况下的生命周期的调用情况.
1. 一个组件内部包含一个路由组件的情况
父
- <template>
- <div id="app">
- <router-view/>
- </div>
- </template>
子
- <template>
- <div>
- <div>{{message}}</div>
- <div > 点击变化数据 </div>
- </div>
- </template>
为了方便查看, 我就只打印方法调用的顺序而不打印数据变化前后.
发现在这种情况下, 先创建父组件到挂载前, 再创建子组件, 然后先挂载子组件再挂载父组件. 这个其实想想就知道, 因为父组件能把数据传给子组件.
再看看这种情况下的更新情况.
可以看到更新的操作是局部更新, 只在子组件调用了更新的生命周期, 而父组件并没调用.
2. 路由切换页面之后的情况
在原本前面的生命周期之后的变化情况是这样的
这就比较有意思了, 切换页面时对含有 router 组件的组件进行更新, 然后先创建新的子组件, 然后再销毁原来的组件, 再把新组件给挂载到路由组件上.
到这里其实就可以得出一个结论:
组件的更新, 只对包含要更新的组件进行更新的生命周期, 这里要更新的组件是父组件中的路由组件, 所以父组件会执行更新的生命周期.
还有路由切换默认的情况下就是创建一个新组件, 然后把原来的组件销毁, 再把新组件挂载上去.
注意这里还有个问题: 切换过去在切换回来的话, 因为会重新调用创建的方法, 所以切换前改过的状态都会恢复原样.
3. 懒加载路由的情况
既然都研究路由相关的情况了, 不妨也看看懒加载路由情况的生命周期变化. 其实关于路由的懒加载我也不是很了解, 大概就是一个拆分的操作吧, 简单来说需要使用到的时候才加载进来, 看看生命周期的变化
可以看出和之前的情况不同, 之前是先创建路由组件再挂载, 这里是挂载完成之后再进行更新. 我是这样想的, 未加懒加载的情况, 再一开始创建时就导入所有的组件, 所以能够挂载前创建, 而懒加载之后, 是在组件走完生命周期后再导入.
懒加载确实有很大的优点, 但是像这里一样, 如果使用懒加载的话就要多走一步更新的操作, 那我们是不是可以对主显示的页面不做懒加载会比较好.
4. 缓存组件的情况
上面说了页面如果切换回来的话会重新调用创建的周期, 但是这样数据就重新开始了, 那如果某种情况下我们不希望重新创建, 那就要使用缓存.
- <template>
- <div id="app">
- <keep-alive>
- <router-view/>
- </keep-alive>
- </div>
- </template>
看看缓存情况的生命周期
其实和我想象中的有点不同, 我以为会重新调用挂载的生命周期, 而加了缓存之后, 子组件的生命周期并没用改变 (父组件更新调用是必然的).
换成自定义组件的效果也是和路由一样的, 就不做演示了
来源: http://www.jianshu.com/p/e63e39669ae1