生命週期中mounted和created的區別。

1、什麼是生命週期？

用通俗的語言來講，就是 Vue中實例或者組件從建立到消滅中間通過的一系列過程。 雖然不太嚴謹，可是也基本上能夠理解。

經過一系列實踐，如今把全部遇到的問題整理一遍，今天記錄一下created和mounted的區別：

 

2、created和mounted區別？

官方圖解以下:

咱們從圖中看兩個節點：

created:在模板渲染成html前調用，即一般初始化某些屬性值，而後再渲染成視圖。

mounted:在模板渲染成html後調用，一般是初始化頁面完成後，再對html的dom節點進行一些須要的操做。

其實二者比較好理解，一般created使用的次數多，而mounted一般是在一些插件的使用或者組件的使用中進行操做，好比插件chart.js的使用: var ctx = document.getElementById(ID); 一般會有這一步，而若是你寫入組件中，你會發如今created中沒法對chart進行一些初始化配置，必定要等這個html渲染完後才能夠進行，那麼mounted就是不二之選。下面看一個例子（用組件）。

3、例子

 

<span style="font-size:14px;">Vue.component("demo1",{
        data:function(){
            return {
                name:"",
                age:"",
                city:""
            }
        },
        template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
        created:function(){
            this.name="唐浩益"
            this.age = "12"
            this.city ="杭州"
            var x = document.getElementById("name")//第一個命令臺錯誤
            console.log(x.innerHTML);
        },
        mounted:function(){
            var x = document.getElementById("name")/</span>/第二個命令臺輸出的結果<span style="font-size:14px;">
            console.log(x.innerHTML);
        }
    });
    var vm = new Vue({
        el:"#example1"
    })</span>

能夠看到輸出以下：

能夠看到都在created賦予初始值的狀況下成功渲染出來了。

可是同時看console臺以下：

能夠看到第一個報了錯，實際是由於找不到id，getElementById(ID) 並無找到元素，緣由以下：

在created的時候，視圖中的html並無渲染出來，因此此時若是直接去操做html的dom節點，必定找不到相關的元素

而在mounted中，因爲此時html已經渲染出來了，因此能夠直接操做dom節點，故輸出告終果「唐浩益」。

以上就是我本身總結的mounted和created的區別，寫的比較簡陋，記錄下來，加深印象。

轉自 http://www.javashuo.com/article/p-rwepsixo-cc.html