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