VUE参考---生命周期
一、总结
一句话总结：
vue对象生命周期函数8个，初始化显示4个（create、mount），更新状态2个（update），销毁vue实例2个（destory），好记的很
a、初始化显示：beforeCreate()、created()、beforeMount()、mounted()
b、更新状态：beforeUpdate()、updated()
c、销毁vue实例: vm.$destory()：beforeDestory()、destoryed()
1、vue对象的生命周期（分阶段）？
a、初始化显示：beforeCreate()、created()、beforeMount()、mounted()
b、更新状态：beforeUpdate()、updated()
c、销毁vue实例: vm.$destory()：beforeDestory()、destoryed()
1). 初始化显示
* beforeCreate()
* created()
* beforeMount()
* mounted()
2). 更新状态
* beforeUpdate()
* updated()
3). 销毁vue实例: vm.$destory()
* beforeDestory()
* destoryed()
2、vue常用的生命周期方法？
*、created()/mounted(): 发送ajax请求, 启动定时器等异步任务
*、beforeDestory(): 做收尾工作, 如: 清除定时器
3、mounted() 启动定时器 实例？
mounted()中常用来做异步操作，比如发送ajax请求、启动定时器等，因为执行mounted()方法的时候已经初始化模板，这个时候用户可以看到初始数据的页面
mounted () {
// 执行异步任务
this.intervalId = setInterval(() => {
console.log('-----')
this.isShow = !this.isShow
}, 1000)
},
4、向后端请求数据应该在vue生命周期的哪个方法里面？
在mounted()方法中，这个时候用户可以看到没有数据的页面，等数据来了就可以看到正常数据的页面
5、beforeDestory()清除定时器实例？
beforeDestory()用来做收尾操作，所以清除定时器要在beforeDestory()中做
mounted () {
// 执行异步任务
this.intervalId = setInterval(() => {
console.log('-----')
this.isShow = !this.isShow
}, 1000)
},
beforeDestroy() {
console.log('beforeDestroy()')
// 执行收尾的工作
clearInterval(this.intervalId)
},
methods: {
destroyVue () {
this.$destroy()
}
}
二、生命周期
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>09_Vue实例_生命周期</title> 6 </head> 7 <body> 8 <!-- 9 1. vue对象的生命周期 10 1). 初始化显示 11 * beforeCreate() 12 * created() 13 * beforeMount() 14 * mounted() 15 2). 更新状态 16 * beforeUpdate() 17 * updated() 18 3). 销毁vue实例: vm.$destory() 19 * beforeDestory() 20 * destoryed() 21 2. 常用的生命周期方法 22 created()/mounted(): 发送ajax请求, 启动定时器等异步任务 23 beforeDestory(): 做收尾工作, 如: 清除定时器 24 --> 25 26 <div id="test"> 27 <button @click="destroyVue">destory vue</button> 28 <p v-if="isShow">范仁义</p> 29 </div> 30 31 <script type="text/javascript" src="../js/vue.js"></script> 32 <script type="text/javascript"> 33 new Vue({ 34 el: '#test', 35 data: { 36 isShow: true 37 }, 38 39 beforeCreate() { 40 console.log('beforeCreate()') 41 }, 42 43 created() { 44 console.log('created()') 45 }, 46 47 beforeMount() { 48 console.log('beforeMount()') 49 }, 50 51 mounted () { 52 console.log('mounted()') 53 // 执行异步任务 54 this.intervalId = setInterval(() => { 55 console.log('-----') 56 this.isShow = !this.isShow 57 }, 1000) 58 }, 59 60 61 beforeUpdate() { 62 console.log('beforeUpdate()') 63 }, 64 updated () { 65 console.log('updated()') 66 }, 67 68 69 beforeDestroy() { 70 console.log('beforeDestroy()') 71 // 执行收尾的工作 72 clearInterval(this.intervalId) 73 }, 74 75 destroyed() { 76 console.log('destroyed()') 77 }, 78 79 methods: { 80 destroyVue () { 81 this.$destroy() 82 } 83 } 84 }) 85 86 87 </script> 88 </body> 89 </html>