mounted钩子函数_Vue 探索之路——生命周期和钩子函数的一些理解
生活随笔
收集整理的這篇文章主要介紹了
mounted钩子函数_Vue 探索之路——生命周期和钩子函数的一些理解
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
對于執(zhí)行順序和什么時候，下面我們將結(jié)合代碼去看看鉤子函數(shù)的執(zhí)
行
<!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 創(chuàng)建前狀態(tài)===============》');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 創(chuàng)建完畢狀態(tài)===============》');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 掛載前狀態(tài)===============》');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 掛載結(jié)束狀態(tài)===============》');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 更新前狀態(tài)===============》');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 更新完成狀態(tài)===============》');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 銷毀前狀態(tài)===============》');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 銷毀完成狀態(tài)===============》');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>根據(jù)運行結(jié)果 我們可以看出來：
beforecreated：el 和 data 并未初始化created:完成了 data 數(shù)據(jù)的初始化，el沒有
beforeMount：完成了 el 和 data 初始化
mounted ：完成掛載另外在標紅處，在掛載之前我們能發(fā)現(xiàn)el還是 {{message}}，
這里就是應(yīng)用的 Virtual DOM（虛擬Dom）技術(shù)，先把坑占住了。到后面mounted掛載的時候再把值渲染進去。
接下來我們看update鈎子函數(shù)：
在控制臺輸入：app.message= 'yes !! I do';會觸發(fā)beforeupdate和update函數(shù)
destroy 相關(guān)
在console里執(zhí)行下命令對 vue實例進行銷毀。
在console中把實例銷毀：觸發(fā)destory函數(shù)
app.$destroy();
我們再重新改變message的值，vue不再對此動作進行響應(yīng)了。但是原先生成的dom元素還存在，可以這么理解，執(zhí)行了destroy操作。
總結(jié)
以上是生活随笔為你收集整理的mounted钩子函数_Vue 探索之路——生命周期和钩子函数的一些理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 「创作之秋」｜ 参赛成员- 获奖名单（参
- 下一篇： vue项目保存页面为pdf 、word