mounted钩子函数_Vue 探索之路——生命周期和钩子函数的一些理解
生活随笔
收集整理的這篇文章主要介紹了
mounted钩子函数_Vue 探索之路——生命周期和钩子函数的一些理解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
對于執行順序和什么時候，下面我們將結合代碼去看看鉤子函數的執
行
<!DOCTYPE html> <html> <head><title></title><script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> </head> <body><div id="app"><p>{{ message }}</p> </div><script type="text/javascript">var app = new Vue({el: '#app',data: {message : "xuxiao is boy" },beforeCreate: function () {console.group('beforeCreate 創建前狀態===============》');console.log("%c%s", "color:red" , "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) //undefined},created: function () {console.group('created 創建完畢狀態===============》');console.log("%c%s", "color:red","el : " + this.$el); //undefinedconsole.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化},beforeMount: function () {console.group('beforeMount 掛載前狀態===============》');console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化console.log(this.$el);console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 },mounted: function () {console.group('mounted 掛載結束狀態===============》');console.log("%c%s", "color:red","el : " + this.$el); //已被初始化console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化console.log("%c%s", "color:red","message: " + this.message); //已被初始化 },beforeUpdate: function () {console.group('beforeUpdate 更新前狀態===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); },updated: function () {console.group('updated 更新完成狀態===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); },beforeDestroy: function () {console.group('beforeDestroy 銷毀前狀態===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); },destroyed: function () {console.group('destroyed 銷毀完成狀態===============》');console.log("%c%s", "color:red","el : " + this.$el);console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message)}}) </script> </body> </html>根據運行結果 我們可以看出來：
beforecreated：el 和 data 并未初始化created:完成了 data 數據的初始化，el沒有
beforeMount：完成了 el 和 data 初始化
mounted ：完成掛載另外在標紅處，在掛載之前我們能發現el還是 {{message}}，
這里就是應用的 Virtual DOM（虛擬Dom）技術，先把坑占住了。到后面mounted掛載的時候再把值渲染進去。
接下來我們看update鈎子函數：
在控制臺輸入：app.message= 'yes !! I do';會觸發beforeupdate和update函數
destroy 相關
在console里執行下命令對 vue實例進行銷毀。
在console中把實例銷毀：觸發destory函數
app.$destroy();
我們再重新改變message的值，vue不再對此動作進行響應了。但是原先生成的dom元素還存在，可以這么理解，執行了destroy操作。
總結
以上是生活随笔為你收集整理的mounted钩子函数_Vue 探索之路——生命周期和钩子函数的一些理解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 「创作之秋」｜ 参赛成员- 获奖名单（参
- 下一篇： 一款自动批量PING IP地址的小程序