Vue生命週期解析

2021-10-24 01:15:36 字數 1029 閱讀 6613

生命週期所有階段:

建立

beforemount()

//注意:這裡進行虛擬的dom變成真實的dom資料

mounted //最早在這裡渲染的變數被賦值了,最遲在這裡做資料請求

// 要和第三方的元件庫進行結合的時候,我們要放在mounted裡面

更新

//注意:資料在mounted裡進行變化,在這裡的資料都是更新後的資料,更新前後不同的是渲染在html內變數的值

beforeupdata() //這裡還可以進行資料的變化

updated() //這裡不允許進行資料的變化,否則會出現死迴圈

銷毀

//注意:銷毀不是說將元件消失,而是說響應式無效,資料是改變了,都是渲染在頁面的內容不會再進行更新

beforedestory() //銷毀無法停止定時器,在這裡再進行停止定時器,解除事件監聽,websocket斷開

destroyed()

created() ,

beforemount() ,

//這裡做真正的掛載,將虛擬的dom變為真實的dom

mounted() , 1000);

timer = setinterval(() => , 1000);

},//更新的資料值獲取的都是一樣的,因為資料更新在beforeupdate,updata是表示的是否渲染到dom的前和後

//這裡也還可以進行資料的變化

vue生命週期淺解析

每個vue例項從建立到銷毀都有乙個生命週期,理解生命週中每個鉤子的意義可以幫助我們快速理解使用vue 下圖源自vue官網 1.beforecreated 建立前 vue例項化以後首先執行beforecreated鉤子,該鉤子函式在資料觀測和事件配置之前被呼叫,所以無法訪問例項中的資料和方法 befo...

Vue的生命週期解析

1.每當我們新建乙個vue的時候,此時vue的生命週期就正式開始了 2.每當我們引入vue的包的時候,就自動引入new vue 3.每當我們引入resource包的時候,就會自動引入this.http.put,get等等 請求 beforecreate 該方法執行的時候資料都還沒有初始化 creat...

vue生命週期

beforecreate 元件例項剛剛被建立,屬性都沒有 create 例項已經建立完成,屬性已經繫結 beforemount 模板編譯之前 mounted 模板編譯之後 beforeupdate 元件更新之前 updated 元件更新完畢 beforedestroy 元件銷毀之前 destroye...