vue生命周期与钩子函数简单示例

2019-11-19 12:00:01

字体：大中小

来源：转载

供稿：网友

本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.COm vue生命周期与钩子函数</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('实例已经创建');      },      beforeCompile:function(){        alert('编译之前');      },      compiled:function(){        alert('编译之后');      },      ready:function(){        alert('插入到文档中');      },      beforeDestroy:function(){        alert('销毁之前');      },      destroyed:function(){        alert('销毁之后');      }    });    /*点击页面销毁vue对象*/    document.onclick=function(){      vm.$destroy();    };  </script></body></html>

网上找来一张流程图：