淺析Vue 生命周期
Vue 提供了11個(gè)鉤子函數(shù)
1,從創(chuàng)建到銷毀發(fā)生的一系列狀態(tài)叫做什么周期,在這個(gè)過(guò)程中vue會(huì)提供狀態(tài)函數(shù)給我們進(jìn)行
該狀態(tài)的操作,這個(gè)函數(shù)叫做鉤子函數(shù)/生命周期函數(shù)/生命周期鉤子

過(guò)程:
new Vue({})
Vue 實(shí)例初始化,讀取所有的生命周期函數(shù),并沒有執(zhí)行,不會(huì)調(diào)用
beforeCreate()
讀取屬性,計(jì)算屬性,添加監(jiān)聽 set get方法,讀取watch方法
create() 可以操作數(shù)據(jù)了
判斷是否有el配置,或者是被調(diào)用了 $mount() 都會(huì)走下一步
判斷有沒有el或者是$mount()作用的dom結(jié)構(gòu)
beforeMount是沒有dom結(jié)構(gòu)的
如果有dom結(jié)構(gòu),讀取dom結(jié)構(gòu) 渲染vue指令 {{}},也就是掛載的過(guò)程
mounted() 可以操作ref
在這里可以用到 ref操作dom,用法為 ref="id",this.$refs,這里的id為唯一值,手寫id會(huì)覆蓋,但是用v-for 遍歷ref,id成了一個(gè)數(shù)組,不會(huì)覆蓋。
總結(jié)
以上所述是小編給大家介紹的Vue 生命周期,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue項(xiàng)目開啟gzip壓縮功能簡(jiǎn)單實(shí)例
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目開啟gzip壓縮功能的相關(guān)資料,gizp壓縮是一種http請(qǐng)求優(yōu)化方式,通過(guò)減少文件體積來(lái)提高加載速度,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue + element-ui實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能
Element-UI是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,手機(jī)端有對(duì)應(yīng)框架是 Mint UI,下面這篇文章主要給大家介紹了關(guān)于利用vue + element-ui如何實(shí)現(xiàn)簡(jiǎn)潔的導(dǎo)入導(dǎo)出功能的相關(guān)資料,需要的朋友可以參考下。2017-12-12
使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例
今天小編就為大家分享一篇使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue中的v-show,v-if,v-bind的使用示例詳解
這篇文章主要介紹了vue中的v-show,v-if,v-bind的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法
本篇文章主要介紹了使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))
這篇文章主要介紹了VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié)),文中通過(guò)圖文表格介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08

