vue鉤子函數(shù)created與mounted兩者的使用方法有何不同-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的瓦房店網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!

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

首先來看下官方解釋,官方解釋說created是在實例創(chuàng)建完成后唄立即調(diào)用。

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

這話的意思我覺得重點在于說掛架階段還沒開始,什么叫還沒開始掛載,也就是說,模板還沒有被渲染成html,也就是這時候通過id什么的去查找頁面元素是找不到的。

下面看下實例來證明。

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

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

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

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

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

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

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

下面看實例

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

下面是結(jié)果

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

取到了值,這說明這時候vue模板已經(jīng)渲染完畢。因此,Dom操作一般是在mounted鉤子函數(shù)中進(jìn)行的

computed:{} 計算屬性,什么是計算屬性呢,我個人理解就是對數(shù)據(jù)進(jìn)行一定的操作,可以包含邏輯處理操作,對計算屬性中的數(shù)據(jù)進(jìn)行監(jiān)控。計算屬性是基于它的以來進(jìn)行更新的,只有在相關(guān)依賴發(fā)生改變時側(cè)能更新變化,以函數(shù)的形式返回結(jié)果。

然后可以像綁定普通屬性一樣在模板中綁定計算屬性。

<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>

新聞名稱:vue鉤子函數(shù)created與mounted兩者的使用方法有何不同-創(chuàng)新互聯(lián)
當(dāng)前地址:http://muchs.cn/article8/cshoop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供云服務(wù)器、營銷型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、域名注冊、響應(yīng)式網(wǎng)站做網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司