Vue2 生命周期 lifecycle
阿新 • • 發佈：2018-09-27
系列 上下 welcom jpg rip 技術分享 例如 log 創建
圖片出處 : 我的github博客https://github.com/songxtianx/Front-End-Blog
<!DOCTYPE html> <html> <head> <title>Welcome to Vue</title> <script src="https://unpkg.com/vue"></script> </head> <body><div id="app">{{msg}}</div> <script> var app = newVue({ el: ‘#app‘, data: { msg: ‘created1‘, }, beforeCreate() { console.log("beforeCreate ===", this.$el, this.msg, "loading事件"); }, created() { console.log("created ===", this.$el, this.msg, "初始化，實現函數自執行"); }, beforeMount() { this.msg = "mounted2"; console.log("beforeMount ===", this.$el, this.msg, " 創建vm.$el並將“el”替換為它。"); }, mounted() { setTimeout(() => { app.$destroy() }, 1000); console.log("mounted ===", this.$el, this.msg, " 發起後端請求，拿回數據，配合路由鉤子"); this.msg = "updated3"; }, beforeUpdate() { // this.msg = "updated3";console.log("beforeUpdate ===", this.$el, this.msg, " 虛擬DOM重呈現和修補程序"); }, updated() { // this.msg = "updated3"; console.log("updated ===", this.$el, this.msg, " 更新"); }, beforeDestroy:function(){ this.msg = "destroyed4"; console.log("beforeDestroy===", this.$el, this.msg, " 確定要銷毀組件嗎？") }, destroyed:function(){ console.log("destroyed ===", this.$el, this.msg, " 觀察器、子組件和事件監聽器已拆卸。") } }) </script> </body> </html>
每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添加自己的代碼的機會。
比如 created 鉤子可以用來在一個實例被創建之後執行代碼：
也有一些其它的鉤子，在實例生命周期的不同階段被調用，如 mounted、updated 和 destroyed。生命周期鉤子的 this 上下文指向調用它的 Vue 實例。
博主Github地址
Vue2 生命周期 lifecycle