为什么要了解vue 的生命周期
如果只是了解vue的语法，也可以根据你的想法实现自己的需求，但是一旦出现问题，就要借助于生命周期去寻找原因，解决问题。另外，有一些需求也需要我们通过生命周期来实现，决定我们把方法写在哪个周期里。
生命周期
vue官网对生命周期有个详细的解释，如图：
生命周期
图中红色部分是生命周期涉及到的钩子函数。
钩子函数
首先是第一个钩子函数。
beforeCreate：此时vue对象还没有产生，具体应用中，可以在此处做一些类似加载动画的东西。
紧接着是created。
created：此时组件已经被创建好，属性也已经被绑定，但是此时DOM还并未生成，el属性还不存子啊。此时可以做什么呢？此时可以获取一些对应的数据，比如请求网络接口，把从接口获取的数据赋给属性，以便在DOM里展示，通常也会在此时结束上一步里的加载动画等操作。
再往下，会查找是否有el属性。el属性即：
如果有，会继续检查是否有template属性；如果没有，会检查new Vue后面是否有el属性，即：
如果两者都没有el属性，声明周期就结束了。如果有一个，进行下一步，检查是否有template。
继续往下，如果有template组件，则会执行render方法，来渲染template中对应的内容；
如果没有template组件，查看是否有el外部的html标签可以作为template编译：
如果两者都没有，生命周期结束，因为没有可以渲染的内容。
然后进入下一个钩子函数。
beforeMount：此时开始编译template中的内容，但是实在虚拟DOM中执行，也就是说，此时还不能看到页面。
编译之后开始挂载。之后是mounted。
mounted：此方法结束的时候，页面已经显示。如果有一些内容是需要页面显示之后再操作的，就可以卸载mounted函数里面。比如，如果需要在当前页面显示之后再获取数据，就可以写在此处。
挂载之后，DOM生成，此时便可以对DOM进行操作，比如增删改查数据之类的。
beforedUpdate：更新组件之前，更新之前如果要进行一些操作的话，可以在此处实现，比如刷新动画。
updated：更新完成，页面已经展示。一般情况下，如果需要在当前组件中做一些改变的话，可以调用此函数。
接着如生命周期的尾部。
beforeDestory：销毁之前。
destoryed：销毁，生命周期结束。
示例
下面的代码，可以直观的展示生命周期里钩子函数执行的顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<button @click ="changeText">改变文字</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:'你好啊',
},
methods:{
changeText:function(){
this.message += ' 蝙蝠侠！'
}
},
beforeCreated:function(){
alert("组件实例化之前执行的函数")
},
created:function(){
alert('组件实例化完成，但页面未显示')
},
beforeMount:function(){
alert('组件挂载前，页面未显示，但虚拟DOM已经配置')
},
mounted:function(){
alert('组件挂载后，页面显示')
},
beforeUpdate:function(){
alert('组件更新前，页面未更新，虚拟DOM已经配置')
},
updated:function(){
alert('组件更新后，页面已更新')
},
beforeDestory:function(){
alert('组件销毁前')
},
destroyed:function(){
alert('组件销毁后')
}
})
</script>
</body>
</html>
网友评论