vue鉤子函數created與mounted兩者的使用方法有何不同-創新互聯

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

成都創新互聯堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都做網站、網站建設、企業官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的瓦房店網站設計、移動媒體設計的需求，幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

1：在使用vue框架的過程中，我們經常需要給一些數據做一些初始化處理，這時候我們常用的就是在created與mounted選項中作出處理。

首先來看下官方解釋，官方解釋說created是在實例創建完成后唄立即調用。

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

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

下面看下實例來證明。

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

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

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

所以，一般creadted鉤子函數主要是用來初始化數據。

2：mounted鉤子函數一般是用來向后端發起請求拿到數據以后做一些業務處理。官方解釋如下：

el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

這意思是該鉤子函數是在掛在完成以后也就是模板渲染完成以后才會被調用。

下面看實例

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

下面是結果

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

取到了值，這說明這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的

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

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

<body>
 <div id="box" :class="{a:true,b:true}">
  <div></div>
  {{msg}}
  <div>
  網址 {{msg}}的網絡協議是：{{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鉤子函數created與mounted兩者的使用方法有何不同-創新互聯
當前地址：http://www.yijiale78.com/article8/cshoop.html

成都網站建設公司_創新互聯，為您提供云服務器、營銷型網站建設、關鍵詞優化、域名注冊、響應式網站、做網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

vue鉤子函數created與mounted兩者的使用方法有何不同-創新互聯