初学Vue,写一些随记谨防忘记,不足之处谢谢指出!!!
本文可以直接复制自行创建一个HTML页面,查看结果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生命周期</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <button @click="dom()">点击</button> <hr/> <button @click="del()">销毁</button> {{msg}} </div> </body> <script> new Vue({ el: "#app", data: { msg: "我爱学Vue!!!" }, /*创建之前,$el(并未接管#app) $data均为undefined*/ beforeCreate() { console.log("---------------beforeCreate----------------") console.log("el:" + this.$el) console.log(this.$el) console.log("data:" + this.$data) console.log(this.$data) console.log(this) }, /*创建,$el为undefined(并未接管#app) $data已获取数据*/ created() { console.log("---------------created----------------") console.log("el:" + this.$el) console.log(this.$el) console.log("data:" + this.$data) console.log(this.$data) }, /*挂载之前,$el已接管#app $data获取数据 但是并未将数据渲染*/ beforeMount() { console.log("---------------beforeMount----------------") console.log("el:" + this.$el.innerHTML) console.log(this.$el) console.log("data:" + this.$data) console.log(this.$data) }, /*挂载之前,$el已接管#app $data获取数据 并将数据渲染 页面成型*/ mounted() { console.log("---------------mounted----------------") console.log("el:" + this.$el.innerHTML) console.log(this.$el) console.log("data:" + this.$data) }, beforeUpdate() { console.log("---------------beforeUpdate----------------") console.log("el:" + this.$el.innerHTML) console.log(this.$el) console.log("data:" + this.$data) console.log(this.msg) }, updated() { console.log("---------------updated----------------") console.log("el:" + this.$el.innerHTML) console.log(this.$el) console.log("data:" + this.$data) console.log(this.msg) }, beforeDestroy() { console.log("---------------beforeDestroy----------------") console.log("el:" + this.$el.innerHTML) console.log(this.$el) console.log("data:" + this.$data) console.log(this.msg) }, destroyed() { console.log("---------------destroyed----------------") console.log("el:" + this.$el.innerHTML) console.log(this.$el) console.log("data:" + this.$data) console.log(this.msg) }, methods: { dom() { this.msg = "我爱Vue-初学!!!" console.log(this) }, del() { this.$destroy(); } } }); </script> </html>