Vue高階（三十六） created 詳解

三、vue 生命週期 mounted 和 created 的區別

四、拓展閱讀

vue.js中created方法是乙個生命週期鉤子函式，乙個vue例項被生成後會呼叫這個函式。乙個vue例項被生成後還要繫結到某個html元素上，之後還要進行編譯，然後再插入到document中。每乙個階段都會有乙個鉤子函式，方便開發者在不同階段處理不同邏輯。

一般可以在created函式中呼叫ajax獲取頁面初始化所需的資料。

每個vue例項在被建立之前都要經過一系列的初始化過程。例如，例項需要配置資料觀測(data observer)、編譯模版、掛載例項到dom，然後在資料變化時更新dom。在這個過程中，例項也會呼叫一些生命週期鉤子，這就給我們提供了執行自定義邏輯的機會。例如，created鉤子函式在例項被建立之後被呼叫：

var vm =
newvue(,
created
:function()
})

也有一些其它的鉤子，在例項生命週期的不同階段呼叫，如mounted、updated、destroyed。鉤子函式中的this指向呼叫它的vue例項。一些童鞋可能會問vue.js是否有「控制器」的概念？答案是，沒有。元件的自定義邏輯可以分布在這些鉤子中。

通俗來說，生命週期就是vue例項或者元件從建立到銷毀所經歷的一系列過程。雖然不太嚴謹，但是也基本上可以理解。

官方**如下:

從上圖可看到兩個節點：

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

vue
.component
("demo1",}
,   template:
"", 
created:
function()
,   mounted:
function()
});var vm =
newvue
()

可以看到輸出如下：

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

但是同時看console臺如下：

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

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

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

Vue高階（三十六） created 詳解

三十六 CSS高階特性

練習（三十六）

C 高階程式設計三十六天元組

Vue高階（三十六） created 詳解

三十六 CSS高階特性

練習（三十六）

C 高階程式設計三十六天 元組

相關推薦

C 高階程式設計三十六天元組