1霞掺、在使用vue框架的過程中骂束，我們經(jīng)常需要給一些數(shù)據(jù)做一些初始化處理，這時(shí)候我們常用的就是在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瓶蝴，也就是這時(shí)候通過id什么的去查找頁面元素是找不到的。下面看下實(shí)例來證明啃擦。
看這個(gè)例子的結(jié)果截圖如下囊蓝，此錯(cuò)誤證明找不到id為name的Dom元素。即模板還未渲染成html
所以令蛉，一般creadted鉤子函數(shù)主要是用來初始化數(shù)據(jù)聚霜。
2、mounted鉤子函數(shù)一般是用來向后端發(fā)起請(qǐng)求拿到數(shù)據(jù)以后做一些業(yè)務(wù)處理珠叔。官方解釋如下：
el 被新創(chuàng)建的 vm.el 也在文檔內(nèi)姥芥。
這意思是該鉤子函數(shù)是在掛在完成以后也就是模板渲染完成以后才會(huì)被調(diào)用。下面看實(shí)例
取到了值汇鞭，這說明這時(shí)候vue模板已經(jīng)渲染完畢凉唐。因此，Dom操作一般是在mounted鉤子函數(shù)中進(jìn)行的
computed:{} 計(jì)算屬性霍骄，什么是計(jì)算屬性呢台囱，我個(gè)人理解就是對(duì)數(shù)據(jù)進(jìn)行一定的操作，可以包含邏輯處理操作读整，對(duì)計(jì)算屬性中的數(shù)據(jù)進(jìn)行監(jiān)控簿训。計(jì)算屬性是基于它的以來進(jìn)行更新的，只有在相關(guān)依賴發(fā)生改變時(shí)側(cè)能更新變化米间，以函數(shù)的形式返回結(jié)果强品。然后可以像綁定普通屬性一樣在模板中綁定計(jì)算屬性。
<body>
<div id="box" :class="{a:true,b:true}">
<div></div>
{{msg}}
<div>
網(wǎng)址 {{msg}}的網(wǎng)絡(luò)協(xié)議是：{{msg2}}
</div>
</div>
<script type="text/javascript">
window.οnlοad=function(){
new Vue({
el:"#box",
data:{
msg:"https://www.baidu.com"
},
computed:{
msg2:function(){
var s=this.msg.split(":")[0];
return s;
}
}
})
}
</script>
</body>
我們從圖中看兩個(gè)節(jié)點(diǎn)：
created:在模板渲染成html前調(diào)用屈糊，即通常初始化某些屬性值的榛，然后再渲染成視圖。
mounted:在模板渲染成html后調(diào)用另玖，通常是初始化頁面完成后困曙，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作表伦。
其實(shí)兩者比較好理解，通常created使用的次數(shù)多慷丽，而mounted通常是在一些插件的使用或者組件的使用中進(jìn)行操作蹦哼，比如插件chart.js的使用: var ctx = document.getElementById(ID); 通常會(huì)有這一步，而如果你寫入組件中要糊，你會(huì)發(fā)現(xiàn)在created中無法對(duì)chart進(jìn)行一些初始化配置纲熏，一定要等這個(gè)html渲染完后才可以進(jìn)行，那么mounted就是不二之選锄俄。下面看一個(gè)例子（用組件）局劲。
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")//第一個(gè)命令臺(tái)錯(cuò)誤
console.log(x.innerHTML);
},
mounted:function(){
var x = document.getElementById("name")//第二個(gè)命令臺(tái)輸出的結(jié)果
console.log(x.innerHTML);
}
});
var vm = new Vue({
el:"#example1"
})
可以看到輸出如下：
可以看到都在created賦予初始值的情況下成功渲染出來了。
但是同時(shí)看console臺(tái)如下：
可以看到第一個(gè)報(bào)了錯(cuò)奶赠，實(shí)際是因?yàn)檎也坏絠d鱼填，getElementById(ID) 并沒有找到元素，原因如下：
在created的時(shí)候毅戈，視圖中的html并沒有渲染出來苹丸，所以此時(shí)如果直接去操作html的dom節(jié)點(diǎn)，一定找不到相關(guān)的元素
而在mounted中苇经，由于此時(shí)html已經(jīng)渲染出來了赘理，所以可以直接操作dom節(jié)點(diǎn)，故輸出了結(jié)果“唐浩益”扇单。
以上就是我自己總結(jié)的mounted和mounted的區(qū)別商模，寫的比較簡陋，記錄下來蜘澜，加深印象施流。
