mounted和created的區別

2021-08-21 13:15:22 字數 1227 閱讀 8825

用通俗的語言來說,就是vue中例項或者元件從建立到消滅中間經過的一系列過程。雖然不太嚴謹,但是也基本上可以理解。

官方**如下:

我們從圖中看兩個節點:

created:在模板渲染成html前呼叫,即通常初始化某些屬性值,然後再渲染成檢視。

mounted:在模板渲染成html後呼叫,通常是初始化頁面完成後,再對html的dom節點進行一些需要的操作。

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

vue.component("demo1",},template:"",created:function(),mounted:function()

});

var vm = new vue()

可以看到輸出如下:

可以看到都在created賦予初始值的情況下成功渲染出來了。

但是同時看console臺如下:

可以看到第乙個報了錯,實際是因為找不到id,getelementbyid(id) 並沒有找到元素,原因如下:

在created的時候,檢視中的html並沒有渲染出來,所以此時如果直接去操作html的dom節點,一定找不到相關的元素

而在mounted中,由於此時html已經渲染出來了,所以可以直接操作dom節點,故輸出了結果「唐浩益」。

以上就是我自己總結的mounted和mounted的區別,寫的比較簡陋,記錄下來,加深印象。

**: 

vue中mounted和created的使用和區別

created 在模板渲染成html前呼叫,即通常初始化某些屬性值,然後再渲染成檢視。mounted 在模板渲染成html後呼叫,通常是初始化頁面完成後,再對html的dom節點進行一些需要的操作。通常created使用的次數多,而mounted通常是在一些外掛程式的使用或者元件的使用中進行操作,比...

vue中created和mounted的區別

beforecreate 建立之前 已經完成了初始化事件和生命週期 created 建立完成 已經完成了初始化的註冊和相應 beforemount 掛載之前 已經完成了模板的渲染 mounted 掛載之後 已經完成了html虛擬化,建立了el節點可以操作dom beforedestory 摧毀之前 ...

vue中created與mounted的區別

關於vue.js中的生命週期,如果不是有特別的需求,一般在專案開發過程中更多的使用created和mounted,所以在本文中主要講解created與mounted在開發中的主要使用區別。版本資訊 完整的生命週期圖示為了避免占用板塊,這裡就不貼出來了,大家可以自行前往vue生命週期檢視。這裡是官方文...