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

更新时间：2020-08-17 14:48:01 作者：startmvc

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

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


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.jb51.net 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>

网上找来一张流程图：