如何在vue中使用生命周期與鉤子函數(shù)

發(fā)布時間：2021-05-11 18:37:25 來源：億速云閱讀：174 作者：Leah 欄目：web開發(fā)

如何在vue中使用生命周期與鉤子函數(shù)？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
  <div id="box">
    {{msg}}
  </div>
  <script>
    var vm=new Vue({
      el:'#box',
      data:{
        msg:'well'
      },
      created:function(){
        alert('實例已經(jīng)創(chuàng)建');
      },
      beforeCompile:function(){
        alert('編譯之前');
      },
      compiled:function(){
        alert('編譯之后');
      },
      ready:function(){
        alert('插入到文檔中');
      },
      beforeDestroy:function(){
        alert('銷毀之前');
      },
      destroyed:function(){
        alert('銷毀之后');
      }
    });
    /*點擊頁面銷毀vue對象*/
    document.onclick=function(){
      vm.$destroy();
    };
  </script>
</body>
</html>

網(wǎng)上找來一張流程圖：

如何在vue中使用生命周期與鉤子函數(shù)

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細節(jié)

如何在vue中使用生命周期與鉤子函數(shù)

Vue的優(yōu)點

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽