探究vue生命周期

萌新求罩，关于单个组件的生命周期的调用情况在网上已有很多文章写有，那我主要探索多个组件情况下的生命周期的调用情况。

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>

看看缓存情况的生命周期

其实和我想象中的有点不同，我以为会重新调用挂载的生命周期，而加了缓存之后，子组件的生命周期并没用改变（父组件更新调用是必然的）。

换成自定义组件的效果也是和路由一样的，就不做演示了