vue中各選項及鉤子函數(shù)執(zhí)行順序詳解
在vue中，實例選項和鉤子函數(shù)和{{}}表達(dá)式都是不需要手動調(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表達(dá)式渲染頁面
修改頁面input時，被自動調(diào)用的選項順序如下：
watch //首先先監(jiān)聽到了改變事件
filters //過濾器沒有添加在該input元素上，但是也被調(diào)用了
beforeUpdate //數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬dom打補(bǔ)丁前
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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue和js中實現(xiàn)模糊查詢方式，具有很好的參考價值，希望對大家有所幫助。也希望大家多多支持腳本之家2022-08-08
關(guān)于antd中select搜索框改變搜索值的問題
這篇文章主要介紹了關(guān)于antd中select搜索框改變搜索值的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Vscode關(guān)閉Eslint語法檢查的多種方式(保證有效)
eslint是一個JavaScript的校驗插件,通常用來校驗語法或代碼的書寫風(fēng)格,下面這篇文章主要給大家介紹了關(guān)于Vscode關(guān)閉Eslint語法檢查的多種方式,文章通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue/React子組件實例暴露方法(TypeScript)
最近幾個月都在用TS開發(fā)各種項目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法，對vue?react組件暴露方法相關(guān)知識感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章主要介紹了Vue3 組件庫的環(huán)境配置搭建過程,使用 Vite+Ts 開發(fā)的是 Vue3 組件庫,所以我們需要安裝 typescript、vue3,同時項目將采用 Less 進(jìn)行組件庫樣式的管理，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vue中使用Swiper簡單封裝組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了使用vue3重構(gòu)拼圖游戲的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本篇文章主要介紹了深入理解Vue transition源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue項目中chunk-vendors.js提示報錯的查看方法(最新推薦)
在vue項目中,chunk-vendors.js報出的錯誤提示經(jīng)常會導(dǎo)致開發(fā)者困惑,正確查看錯誤的方法是從錯誤提示的詳細(xì)信息中找到報錯原因,下面給大家分享vue項目中chunk-vendors.js提示報錯的查看方法,感興趣的朋友一起看看吧2024-12-12
詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定，非常具有實用價值，需要的朋友可以參考下2017-05-05