vue的生命週期及使用場景

2021-10-10 07:19:00 字數 1487 閱讀 2897

此時還訪問不到data中的屬性以及methods中的屬性和方法,可以在當前生命週期建立乙個loading事件,在頁面載入完成之後將loading移除。

當前生命週期執行的時候會遍歷data中所有的屬性,給每乙個屬性都新增乙個getter、setter方法,將data中的屬性變成乙個響應式屬性;當前生命週期執行的時候會遍歷data&&methods身上所有的屬性和方法,將這些屬性和方法**到vue的例項身上,在當前生命週期中我們可以進行前後端資料的互動(注:在vue專案中,我們在進行前後端互動時一般不用ajax,因為我們只是想單純的使用ajax,但是卻要引入整個jquery,在一定程度上降低了效能,再者vue本身設計就是儘量減少dom元素的操作,但jquery卻是注重dom元素的操作,這就有點不合理,所以,一般用axios)。

拓展:axios與ajax的區別及優缺點

區別:axios是通過promise實現對ajax技術的一種封裝,就像jquery對ajax的封裝一樣,簡單來說就是ajax技術實現了區域性資料的重新整理,axios實現了對ajax的封裝,axios有的ajax都有,ajax有的axios不一定有,總結一句話就是axios是ajax,ajax不止axios

ajax:

1、本身是針對mvc程式設計,不符合前端mvvm的浪潮;

2、基於原生xhr開發,xhr本身的架構不清晰,已經有了fetch的替代方案,jquery整個專案太大,單純使用ajax卻要引入整個jquery非常不合理(採取個性化打包方案又不能享受cdn服務);

3、ajax不支援瀏覽器的back按鈕;

4、安全問題ajax暴露了與伺服器互動的細節;

5、對搜尋引擎的支援比較弱;

6、破壞程式的異常機制;

7、不容易除錯。

axios:

1、從node.js建立http請求;

2、支援promise api;

3、客戶端防止csrf(**惡意利用);

4、自動轉化json資料;

5、提供了一些併發請求的介面。

模板與資料進行結合,但是還沒有掛載到頁面上,因此我們可以在當前生命週期中進行資料的修改。

當前生命週期資料和模板進行相結合,並且已經掛載到頁面上了,因此我們可以在當前生命週期中獲取到真實的dom元素,還可以在當前生命週期中做方法的例項化,給元素新增乙個ref屬性,且值必唯一,通過:this.$refs.屬性獲取dom元素。

當資料發生改變的時候當前生命週期就會執行,因此我們可以通過當前生命週期來檢測資料的變化,當前生命週期執行的時候會將更新的資料與模板進行相結合,但是並沒有掛載到頁面上,因此我們可以在當前生命週期中做更新資料的最後修改。

資料與模板進行相結合,並且將更新後的資料掛載到了頁面上。因此我們可以在當前生命週期中獲取到最新的dom結構(注:在當前生命週期中如果做例項化操作的時候須做條件判斷)。

當前生命週期中我們需要做事件的解綁,監聽的移除,定時器的清除等操作。

當前生命週期中我們需要做事件的解綁,監聽的移除,定時器的清除等操作。(注:被keep-alive包裹的元件,不會被銷毀,而是被快取起來)。

Vue中有哪些生命週期及使用場景

在vue中分為8個階段 建立前 後,載入前 後,更新前 後,銷毀前 後。1 beforecreate 建立前 在資料觀測和初始化事件還未開始。2 created 建立後 完成資料觀測,屬性和方法的運算,初始化事件,el屬性還沒有顯示出來。3 beforemount 載入前 4 mounted 載入後...

React生命週期詳解及適用場景

constructor 建構函式 只有在元件例項化並插入到 dom 中的時候才會被呼叫。元件例項 化的過程稱作元件的掛載 mount 它在元件初始化時被呼叫。在這個方法中,你可以設定初始化狀態以及繫結類方法。componentwillmount 它在 render 方法之前被呼叫。這就是為什麼它可以...

vue生命週期

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