vue中生命周期created和mouted的區(qū)別？

vue中生命周期created和mouted的區(qū)別？

created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。掛載階段還沒有開始，$el屬性目前不可見。

mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

el被新創(chuàng)建的vm.$el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。 beforeCreate 創(chuàng)建之前：已經(jīng)完成了 初始化事件和生命周期 created 創(chuàng)建完成：已經(jīng)完成了 初始化注冊和響應(yīng) beforeMount 掛載之前：已經(jīng)完成了模板渲染 mounted :掛載之后：已完成HTML虛擬化，創(chuàng)建了el節(jié)點(diǎn) 可以操作DOM了 beforeDestroy ：摧毀之前：整個vue都處在實(shí)時監(jiān)控空渲染和更新 destroyed: 已摧毀，已經(jīng)摧毀了觀察者，子元素和事件監(jiān)聽 created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。 mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。 掛載到節(jié)點(diǎn)上的初始化方法通常用mounted去操作，主動調(diào)起的用methods里面封裝方法。

數(shù)據(jù)初始化一般放到created里面，這樣可以及早發(fā)請求獲取數(shù)據(jù)，如果有依賴dom必須存在的情況，就放到mounted(){this.$nextTick(() => { /* code */ })百科}里面 Vue是異步執(zhí)行dom更新的，一旦觀察到數(shù)據(jù)變化，Vue就會開啟一個隊(duì)列，然后把在同一個事件循環(huán) (event loop) 當(dāng)中觀察到數(shù)據(jù)變化的 watcher 推送進(jìn)這個隊(duì)列。如果這個watcher被觸發(fā)多次，只會被推送到隊(duì)列一次。這種緩沖行為可以有效的去掉重復(fù)數(shù)據(jù)造成的不必要的計(jì)算和DOm操作。

而在下一個事件循環(huán)時，Vue會清空隊(duì)列，并進(jìn)行必要的DOM更新。

Vue生命周期中mounted和created的區(qū)別

1、在使用vue框架的過程中，我們經(jīng)常需要給一些數(shù)據(jù)做一些初始化處理，這時候我們常用的就是在created與mounted選項(xiàng)中作出處理。 首先來看下**解釋，**解釋說created是在實(shí)例創(chuàng)建完成后立即調(diào)用。

在這一步，實(shí)例已完成以下配置：數(shù)據(jù)觀測 (data observer)，屬性和方法的運(yùn)算，watch/event 事件回調(diào)。

然而，掛載階段還沒開始，$el 屬性目前不可見。 這話的意思我覺得重點(diǎn)在于說掛架階段還沒開始，什么叫還沒開始掛載，也就是說，模板還沒有被渲染成html，也就是這時候通過id什么的去查找頁面元素是找不到的。下面看下實(shí)例來證明。 看這個例子的結(jié)果截圖如下，此錯誤證明找不到id為name的Dom元素。

即模板還未渲染成html 2、mounted鉤子函數(shù)一般是用來向后端發(fā)起請求拿到數(shù)據(jù)以后做一些業(yè)務(wù)處理。**解釋如下： el 被新創(chuàng)建的 vm. el 也在文檔內(nèi)。 這意思是該鉤子函數(shù)是在掛在完成以后也就是模板渲染完成以后才會被調(diào)用。

下面看實(shí)例 取到了值，這說明這時候vue模板已經(jīng)渲染完畢。因此，Dom操作一般是在mounted鉤子函數(shù)中進(jìn)行的 computed:{} 計(jì)算屬性，什么是計(jì)算屬性呢，我個人理解就是對數(shù)據(jù)進(jìn)行一定的操作，可以包含邏輯處理操作，對計(jì)算屬性中的數(shù)據(jù)進(jìn)行監(jiān)控。計(jì)算屬性是基于它的以來進(jìn)行更新的，只有在相關(guān)依賴發(fā)生改變時側(cè)能更新變化，以函數(shù)的形式返回結(jié)果。

然后可以像綁定普通屬性一樣在模板中綁定計(jì)算屬性。 我們從圖中看兩個節(jié)點(diǎn)： created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。 mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

其實(shí)兩者比較好理解，通常created使用的次數(shù)多，而mounted通常是在一些插件的使用或者組件的使用中進(jìn)行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID); 通常會有這一步，而如果你寫入組件中，你會發(fā)現(xiàn)在created中無法對chart進(jìn)行一些初始化配置，一定要等這個html渲染完后才可以進(jìn)行，那么mounted就是不二之選。下面看一個例子（用組件）。 可以看到輸出如下： 可以看到都在created賦予初始值的情況下成功渲染出來了。 但是同時看console臺如下： 而在mounted中，由于此時html已經(jīng)渲染出來了，所以可以直接操作dom節(jié)點(diǎn)，故輸出了結(jié)果“唐浩益”。

以上就是我自己總結(jié)的mounted和mounted的區(qū)別，寫的比較簡陋，記錄下來，加深印象。

vue生命周期及mounted和created的區(qū)別

create 和 mounted 相關(guān) 另外在標(biāo)紅處，我們能發(fā)現(xiàn)el還是 {{message}}，這里就是應(yīng)用的 Virtual DOM（虛擬Dom）技術(shù)，先把坑占住了。到后面mounted掛載的時候再把值渲染進(jìn)去。

這里我們在 chrome console里執(zhí)行以下命令 下面就能看到data里的值被修改后，將會觸發(fā)update的操作。

有關(guān)于銷毀，暫時還不是很清楚。我們在console里執(zhí)行下命令對 vue實(shí)例進(jìn)行銷毀。銷毀完成后，我們再重新改變message的值，vue不再對此動作進(jìn)行響應(yīng)了。但是原先生成的dom元素還存在，可以這么理解，執(zhí)行了destroy操作，后續(xù)就不再受vue控制了。

這么多鉤子函數(shù)，我們怎么用呢，我想大家可能有這樣的疑問吧，我也有，哈哈哈。 我們從圖中看兩個節(jié)點(diǎn)： 其實(shí)兩者比較好理解，通常created使用的次數(shù)多一般用于接口獲取數(shù)據(jù)，而mounted通常是在一些插件的使用或者組件的使用中進(jìn)行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID) ; 通常會有這一步，而如果你寫入組件中，你會發(fā)現(xiàn)在created中無法對chart進(jìn)行一些初始化配置，一定要等這個html渲染完后才可以進(jìn)行，那么mounted就是不二之選。下面看一個例子（用組件）。

可以看到輸出如下： 可以看到都在created賦予初始值的情況下成功渲染出來了。 但是同時看console臺如下： 可以看到**個報了錯，實(shí)際是因?yàn)檎也坏絠d，getElementById(ID) 并沒有找到元素，原因如下： 在created的時候，視圖中的html并沒有渲染出來，所以此時如果直接去操作html的dom節(jié)點(diǎn)，一定找不到相關(guān)的元素而在mounted中，由于此時html已經(jīng)渲染出來了，所以可以直接操作dom節(jié)點(diǎn)，故輸出了上圖結(jié)果。 以上就是我自己總結(jié)的mounted和mounted的區(qū)別，寫的比較簡陋，記錄下來，加深印象。