生命周期函数就是vue实例在某一个时间点会自动执行函数（它并不放在methods里面，而是单独的在vue的实例里）
1
| <div id="app">hello world</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| var vm = new Vue({
el: '#app',
template:'<div> hello vue </div>',
beforeCreate:function(){
console.log('beforeCreate');
},
created:function(){
console.log('created');
},
beforeMount:function(){
console.log('beforeMount');
},
mounted:function(){
console.log('mounted');
},
beforeDestory:function(){
console.log('beforeDestory');
},
destoryed:function(){
console.log('destoryed');
},
beforeUpdate:function(){
console.log('beforeUpdate');
},
updated:function(){
console.log('updated');
},
})
|
- beforeCreate:在基础的初始化（事件&生命周期）之后自动执行的函数；
- created:在初始化（外部注入、双向绑定、校验等）之后自动执行的函数；
- 如果有
template，就会将template里的内容输出，如果没有，就会将el挂载的标签的内容输出；
- beforeMount：执行这个函数时页面还未渲染；
- mounted：执行这个函数时页面已经渲染；
- beforeDestory、destoryed：这个时候并没有打印出beforeDestory、destoryed，当调用vm.$destory()函数时会执行这两个函数；
- beforeUpdate、updated：这两个只有在data被修改时会执行。还没有重新渲染之前beforeUpdate会自动执行，当重新渲染之后updated执行。
