第五章：生命周期

有话说在前面

首先我们需要了解什么是什么生命周期。
其实用大白话说生命周期其实就是实例化一个vue对象的整个过程。因为我们的页面，并不是纯粹的静态html，当一个组件创建的时候，它其实相当于vue内部先虚拟产生了一套dom节点，然后，经过一系列的过程，最后把这些节点渲染到html上。

而这一套过程就叫做声明周期。它主要包括了，初始化，编译之前，绑定方法，开始渲染这些过程。

生命周期有什么用？

这是一个在生命周期中引入swiper的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>党云龙vue教程-vue中生命周期中引入swiper</title>
        <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="https://dangyunlong.oss-cn-beijing.aliyuncs.com/banner4.png" alt="党云龙博客小程序"></div>
                    <div class="swiper-slide"><img src="https://blogdangyunlong.oss-cn-beijing.aliyuncs.com/banner1.png" alt="党云龙vuecli教程"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
        
        <script>
            new Vue({
                el:"#app",
                data:{
                    message:3
                },
                methods: {
            
                },
                mounted: function() {
                    //swiper
                    new Swiper ('.swiper-container', {
                        loop: true,
                        pagination: '.swiper-pagination',
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        scrollbar: '.swiper-scrollbar',
                    })
                }
            })
        </script>
    </body>
</html>

我们之所以必须把创建swiper的方法写到生命周期中，是因为vue在创建虚拟dom的时候，并没有真正的dom存在，换句话说就是，页面上什么也没有，你那些什么容器div啊，img啊都不存在。
这个时候swiper按照它自己的机制，去寻找div然后注入自己的元素，当然不行了。

现在你明白生命周期的作用了吧。

当然生命周期远远不止这么简单，你需要找到合适的时机去注入数据，这个在后面实战中我们会讲到。

官方用一张图，非常详细的描述了vue的生命周期：

vue生命周期