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