Vue2.x之生命周期详解
一、 分三步流程解读
1、初始化显示
2、更新状态
3、销毁Vue实例
二、 常用的生命周期方法
三、 完整流程解读
完整生命周期实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>生命周期</title></head> <body> <div id="test"> <button @click="destroyVue">destory vue</button> <p v-if="isShow">Hello,world!</p></div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript">new Vue({ el: '#test', data: { isShow: true }, beforeCreate() { console.log('beforeCreate()') }, created() { console.log('created()') }, beforeMount() { console.log('beforeMount()') }, mounted() { console.log('mounted()') // 执行异步任务 this.intervalId = setInterval(() = >{ console.log('-----') this.isShow = !this.isShow }, 1000) }, beforeUpdate() { console.log('beforeUpdate()') }, updated() { console.log('updated()') }, beforeDestroy() { console.log('beforeDestroy()') // 执行收尾的工作 clearInterval(this.intervalId) }, destroyed() { console.log('destroyed()') }, methods: { destroyVue() { this.$destroy() } } })</script> </body> </html>
转载至: https://blog.csdn.net/qq_41647999/article/details/85036981