vue生命周期 · vue.js

生命周期分類 - beforeCreate：創建前 - created：創建完成 - beforeMount：掛載前 - mounted：掛載完成 - beforeUpdate：即將更新渲染 - updated：更新成功 - beforeDesotry：銷毀前 - destoryed ：銷毀完成 ### 實例 ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app" ref="app"> {{ name }} </div> </body> <script> let vm=new Vue({ el:"#app", data:{ name:"liuting", }, beforeCreate(){ console.log("創建前："); console.log(this.$el); console.log(this.$data); }, created(){ console.log("創建完成："); console.log(this.$el); console.log(this.$data); }, beforeMount(){ console.log("掛載前："); console.log(this.$el); console.log(this.$data); }, mounted(){ console.log("掛載完成："); console.log(this.$el); console.log(this.$data); }, beforeUpdate(){ console.log('=即將更新渲染='); let name = this.$refs.app.innerHTML; console.log('name:'+name); }, updated(){ console.log('==更新成功=='); let name = this.$refs.app.innerHTML; console.log('name:'+name); }, /*beforeDestory(){ console.log("銷毀前："); }, destoryed(){ console.log("銷毀完成："); }*/ }); </script> </html> 說明： console.log(this.$el); console.log(this.$data); 創建前： undefined undefined 創建完成： undefined {__ob__: Observer} 掛載前： <div id=?"app">? {{ name }} ?</div>? {__ob__: Observer} 掛載完成： <div id=?"app">? liuting ?</div>? {__ob__: Observer} ~~~