天天看點

vue中created鈎子函數與mounted鈎子函數的使用差別

1:在使用vue架構的過程中,我們經常需要給一些資料做一些初始化處理,這時候我們常用的就是在created與mounted選項中作出處理。

首先來看下官方解釋,官方解釋說created是在執行個體建立完成後被立即調用。在這一步,執行個體已完成以下配置:資料觀測 (data observer),屬性和方法的運算,watch/event 事件回調。然而,挂載階段還沒開始,$el 屬性目前不可見。

這話的意思我覺得重點在于說挂載階段還沒開始,什麼叫還沒開始挂載,也就是說,模闆還沒有被渲染成html,也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下執行個體來證明。

vue中created鈎子函數與mounted鈎子函數的使用差別

看這個例子的結果截圖如下,此錯誤證明找不到id為name的dom元素。即模闆還未渲染成html

vue中created鈎子函數與mounted鈎子函數的使用差別

是以,一般creadted鈎子函數主要是用來初始化資料。

2:mounted鈎子函數一般是用來向後端發起請求拿到資料以後做一些業務處理。官方解釋如下:

el 被新建立的 vm.$el 替換,并挂載到執行個體上去之後調用該鈎子。如果 root 執行個體挂載了一個文檔内元素,當 mounted 被調用時 vm.$el 也在文檔内。

這意思是該鈎子函數是在挂載完成以後也就是模闆渲染完成以後才會被調用。下面看執行個體

vue中created鈎子函數與mounted鈎子函數的使用差別

下面是結果

vue中created鈎子函數與mounted鈎子函數的使用差別

取到了值,這說明這時候vue模闆已經渲染完畢。是以,dom操作一般是在mounted鈎子函數中進行的

總結:

通常created使用的次數多,而mounted通常是在一些插件的使用或者元件的使用中進行操作,比如插件chart.js的使用: var ctx = document.getelementbyid(id);通常會有這一步,而如果你寫入元件中,你會發現在created中無法對chart進行一些初始化配置,一定要等這個html渲染完後才可以進行,那麼mounted就是不二之選。

methods:{}中的方法都需要主動去觸發,比如點選click之類的

而created(){}、mounted(){}、裡面的代碼都是自動去執行的,即vue生命周期到了哪一步就直接去執行對應鈎子函數裡面的代碼了,無需手動去執行

created中主要放初始化擷取資料之類,mounted()中挂載到具體的dom節點

computed:{}   計算屬性,什麼是計算屬性呢,我個人了解就是對資料進行一定的操作,可以包含邏輯處理操作,對計算屬性中的資料進行監控。計算屬性是基于它的以來進行更新的,隻有在相關依賴發生改變時側能更新變化,以函數的形式傳回結果。然後可以像綁定普通屬性一樣在模闆中綁定計算屬性。

mounted 是生命周期鈎子,vue的生命周期中一個執行個體的mounted隻會運作一次。mounted在vue的渲染模闆挂載到$el元素上才會調用,很顯然你export的時候el都麼有自然不會運作mounted鈎子函數了。

所有的方法都應該在methods裡定義,然後在created或者mounted裡 使用this調用方法,用這種方式實作初始化

繼續閱讀