溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue鉤子函數(shù) created與mounted兩者的使用方法有何不同

發(fā)布時(shí)間：2020-11-06 14:52:29 來(lái)源：億速云 閱讀：565 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

vue鉤子函數(shù) created與mounted兩者的使用方法有何不同？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

1：在使用vue框架的過(guò)程中，我們經(jīng)常需要給一些數(shù)據(jù)做一些初始化處理，這時(shí)候我們常用的就是在created與mounted選項(xiàng)中作出處理。

首先來(lái)看下官方解釋，官方解釋說(shuō)created是在實(shí)例創(chuàng)建完成后唄立即調(diào)用。

在這一步，實(shí)例已完成以下配置：數(shù)據(jù)觀測(cè) (data observer)，屬性和方法的運(yùn)算，watch/event 事件回調(diào)。然而，掛載階段還沒(méi)開(kāi)始，$el 屬性目前不可見(jiàn)。

這話的意思我覺(jué)得重點(diǎn)在于說(shuō)掛架階段還沒(méi)開(kāi)始，什么叫還沒(méi)開(kāi)始掛載，也就是說(shuō)，模板還沒(méi)有被渲染成html，也就是這時(shí)候通過(guò)id什么的去查找頁(yè)面元素是找不到的。

下面看下實(shí)例來(lái)證明。

vue鉤子函數(shù) created與mounted兩者的使用方法有何不同

看這個(gè)例子的結(jié)果截圖如下，此錯(cuò)誤證明找不到id為name的Dom元素。即模板還未渲染成html

vue鉤子函數(shù) created與mounted兩者的使用方法有何不同

所以，一般creadted鉤子函數(shù)主要是用來(lái)初始化數(shù)據(jù)。

2：mounted鉤子函數(shù)一般是用來(lái)向后端發(fā)起請(qǐng)求拿到數(shù)據(jù)以后做一些業(yè)務(wù)處理。官方解釋如下：

el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。

這意思是該鉤子函數(shù)是在掛在完成以后也就是模板渲染完成以后才會(huì)被調(diào)用。

下面看實(shí)例

vue鉤子函數(shù) created與mounted兩者的使用方法有何不同

下面是結(jié)果

vue鉤子函數(shù) created與mounted兩者的使用方法有何不同

取到了值，這說(shuō)明這時(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ì)算屬性是基于它的以來(lái)進(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>

補(bǔ)充知識(shí)：vue請(qǐng)求數(shù)據(jù)放在created好還是mounted里好

建議放在created里

created：在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。

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

如果在mounted鉤子函數(shù)中請(qǐng)求數(shù)據(jù)可能導(dǎo)致頁(yè)面閃屏問(wèn)題

其實(shí)就是加載時(shí)機(jī)問(wèn)題，放在created里會(huì)比mounted觸發(fā)早一點(diǎn)，如果在頁(yè)面掛載完之前請(qǐng)求完成的話就不會(huì)看到閃屏了

關(guān)于vue鉤子函數(shù) created與mounted兩者的使用方法有何不同問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手