vue中各選項及鉤子函數(shù)執(zhí)行順序詳解
在vue中，實例選項和鉤子函數(shù)和{{}}表達式都是不需要手動調(diào)用就可以直接執(zhí)行的。
vue的生命周期如下圖：
在頁面首次加載執(zhí)行順序有如下：
beforeCreate //在實例初始化之后、創(chuàng)建之前執(zhí)行
created //實例創(chuàng)建后執(zhí)行
beforeMounted //在掛載開始之前調(diào)用
filters //掛載前加載過濾器
computed //計算屬性
directives-bind //只調(diào)用一次，在指令第一次綁定到元素時調(diào)用
directives-inserted //被綁定元素插入父節(jié)點時調(diào)用
activated //keek-alive組件被激活時調(diào)用，則在keep-alive包裹的嵌套的子組件中觸發(fā)
mounted //掛載完成后調(diào)用
{{}} //mustache表達式渲染頁面
修改頁面input時，被自動調(diào)用的選項順序如下：
watch //首先先監(jiān)聽到了改變事件
filters //過濾器沒有添加在該input元素上，但是也被調(diào)用了
beforeUpdate //數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬dom打補丁前
directived-update //指令所在的組件的vNode更新時調(diào)用，但可能發(fā)生在其子vNode更新前
directives-componentUpdated//指令所在的組件的vNode及其子組件的vNode全部更新后調(diào)用
updated //組件dom已經(jīng)更新
組件銷毀時，執(zhí)行順序如下：
beforeDestroy //實例銷毀之前調(diào)用
directives-unbind //指令與元素解綁時調(diào)用，只調(diào)用一次
deactivated //keep-alive組件停用時調(diào)用
destroyed //實例銷毀之后調(diào)用
以上這篇vue中各選項及鉤子函數(shù)執(zhí)行順序詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了關于el-scrollbar滾動條初始化不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue.js中created()與activated()的個人使用解讀
這篇文章主要介紹了vue.js中created()與activated()的個人使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細介紹了vue穿梭框?qū)崿F(xiàn)上下移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
vue + webpack如何繞過QQ音樂接口對host的驗證詳解
這篇文章主要給大家介紹了關于利用vue + webpack如何繞過QQ音樂接口對host的驗證的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧2018-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)右上角時間顯示實時刷新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
一文解決vue2 element el-table自適應高度問題
在寫公司后臺項目的時候遇到一個需求,要求表格頁面不能有滾動條,所以必須封裝一個公共方法來實現(xiàn)表格自適應高度,本問小編給大家介紹了如何解決vue2 element el-table自適應高度問題,需要的朋友可以參考下2023-11-11
vue移動端使用appClound拉起支付寶支付的實現(xiàn)方法
這篇文章主要介紹了vue移動端使用appClound拉起支付寶支付的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
今天小編就為大家分享一篇vue動態(tài)設置img的src路徑實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue.js響應式數(shù)據(jù)的簡單實現(xiàn)方法(一看就會)
Vue最巧妙的特性之一是其響應式系統(tǒng),下面這篇文章主要給大家介紹了關于Vue.js響應式數(shù)據(jù)的簡單實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue 動態(tài)表單開發(fā)方法,結(jié)合具體案例形式詳細分析了vue.js動態(tài)表單相關原理、開發(fā)步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-12-12