第五章：生命周期
有话说在前面
首先我们需要了解什么是什么生命周期。
其实用大白话说生命周期其实就是实例化一个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生命周期
网友评论