1、案例1
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>生命周期</title> </head> <body> <div id="app"> <button @click="clickFunc">销毁VUE实例</button> <p v-show="showFlag">测试VUE生命周期</p> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { intervalId: null, showFlag: true }, beforeCreate() {//执行一次 console.info("beforeCreate..."); }, created() {//执行一次 this.intervalId = setInterval(() => { this.showFlag = !this.showFlag; console.info("定时器还在执行..."); }, 1000); console.info("created..."); }, beforeMount() {//执行一次 console.info("beforeMount..."); }, mounted() {//执行一次 console.info("mounted..."); }, beforeUpdate() { //会执行N次 console.info("beforeUpdate..."); }, updated() { //会执行N次 console.info("updated..."); }, beforeDestroy() {//执行一次 //销毁VM实例前关闭定时器 clearInterval(this.intervalId); console.info("beforeDestroy..."); }, destroyed() {//执行一次 console.info("destroyed..."); }, methods: { clickFunc() { //销毁VM实例 this.$destroy(); } } }); </script> </body> </html>