您好,登錄后才能下訂單哦!
這篇文章主要介紹vue中生命周期指的是什么,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
Vue生命周期(鉤子函數)表示的是一個實例從開始創建到消亡的過程。Vue的生命周期共分為三個階段分別是創建階段,運行階段以及銷毀階段
Vue的生命周期指的是什么?
Vue的生命周期通俗來講就是我們用Vue寫的網頁在瀏覽器運行起來之后,我們寫的代碼要在內存里執行。例如我們都會寫的var vm = new Vue();
,就是new出來了一個Vue 實例。這個實例從創建一直到我們關掉瀏覽器這個實例消亡,這一段時間里,Vue這個框架干了啥,Vue的實例做了啥,先做啥,后做啥,這一系列事情的關系是怎樣的,這就是Vue的生命周期。
Vue的生命周期分三個階段:創建階段,運行階段,銷毀階段。
在圖中,我對生命周期各個部分進行了標注并做了一些必要的解釋。
流程解釋(12步對應圖中操作):
1、生成一個Vue實例,執行鉤子函數beforeCreate()。【實例創建前】
2、對實例進行初始化。
3、把實例成員掛載到view model身上,執行鉤子函數created()。【實例創建后】
4、判斷有無el對象【el對象用來指明我們控制的視圖是那一區域】。
5、如果有el對象,判斷是否使用了模板。
6、如果使用了模板,則按照編譯模板的方法去做,如果沒有則把el控制的視圖區域當做模板來渲染。執行鉤子函數beforeMount()。【實例掛載前】
7、把經過更改的新的el視圖區域,替換掉原來的el視圖區域。執行鉤子函數Mounted()【實例掛載后】。
8、進入運行階段,運行階段就是進行一些操作了,執行鉤子函數beforeUpdate()。【數據更新前】
9、操作完畢之后,把這些數據渲染到頁面上,執行鉤子函數updated()。【數據更新后】
10、進入銷毀階段,執行鉤子函數beforeDestroy()【實例銷毀前】
11、進行銷毀,拆卸監視器、子組件和事件偵聽器。
12、銷毀完成,執行鉤子函數destroyed()。【實例銷毀后】
生命周期中的鉤子函數是Vue在它生命周期中必須要執行到的事件,這些事件其實就是函數。
當然這些事件是允許我們程序員來編寫代碼的,以此當Vue的生命周期走到這里時,來進行我們想要的操作。
一個實例在創建階段和銷毀階段的六個鉤子函數是永遠執行一次的。執行過去了,就不會再次執行了。
在圖中提到:在Vue的生命周期執行完init Events之后我們才能訪問我們定義的實例成員,并且這個點也是最早可以訪問到實例成員的點,為了驗證這個,我們看一段代碼。
<body> <div id="app"></div> //這里的路徑為本機上的vue.js路徑 <script src="./lib/vue.js"></script> <script> var vm = new Vue({ el : '#app', data : { msg : '我是初始值' }, methods : { show : function(){ console.log(this.msg); } }, beforeCreate(){ console.log(this.msg); }, created(){ console.log(this.msg); } }); </script> </body>
結果如圖:
可以看到在beforeCreate()的時候,我們輸出的是undefined,而在 created()后就輸出了msg的值。
這說明在Vue的實例成員是在created之后,才掛載到了我們的vm身上,所以在created之后再訪問就能訪問到我們的實例成員了。
以上是vue中生命周期指的是什么的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。