Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期；
Vue生命周期示意图：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示；
Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，我们可以通过这些方法在Vue实例创 建、挂载、数据更新、销毁等阶段做一些事情；
钩子函数的详情介绍网址：https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子
beforeCreate与created钩子函数进行对数据的观测
示例效果：
该两个钩子函数的vue代码：
<script> window.onload= () =>{ new Vue({ el:‘div‘, data:{ msg:‘欢迎来到perfect*博客园！！！！‘ }, beforeCreate(){ alert("1 beforCreate 创建Vue实例，但是未进行数据的观测"+this.msg); }, created(){ alert("2 created创建Vue实例，进行数据的观测了"+this.msg); } }) } </script>
html:
<div >
<input type="text" v-model="msg" /><br />
<h1>{{msg}}</h1>
</div>
beforeMount与mounted钩子函数进行对数据的挂载：
挂载实例的钩子函数代码：
beforeMount(){ alert("3 beforeMount挂载vue实例前"+this.msg+this.$refs.msgText.innerText); }, mounted(){ alert("4 mounted已经挂载vue实例了"+this.msg+this.$refs.msgText.innerText); }
HTML：
<h1 ref=‘msgText‘>{{msg}}</h1>
beforeUpdate与updated钩子函数：
数据更新前与更新后的钩子函数：
beforeUpdate(){ alert("5 beforeUpdate数据更新前"+this.msg+this.$refs.msgText.innerText); }, updated(){ alert("6 updated数据更新后"+this.msg+this.$refs.msgText.innerText); }
html:
<input type="text" v-model="msg" /><br /> <h1 ref=‘msgText‘>{{msg}}</h1>
beforeDestroy与destroyed的钩子函数：
由效果图可知当点击销毁后，数据就不能再进行观测了，由此观测不到数据的修改
销毁前与销毁后的钩子函数代码：
beforeDestroy(){ alert("7 beforeDestroy 销毁前"); }, destroyed(){ alert("8 destroyed 销毁后"); }, methods:{ onDestroy(){ this.$destroy(); }
html:
<input type="text" v-model="msg" /><br /> <h1 ref=‘msgText‘>{{msg}}</h1> <button @click="onDestroy">销毁</button>
以上所有钩子函数组成的代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue生命周期钩子函数</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 <script> 8 9 window.onload= () =>{ 10 new Vue({ 11 el:‘div‘, 12 data:{ 13 msg:‘欢迎来到perfect*博客园！！！！‘ 14 15 }, 16 17 18 beforeCreate(){ 19 alert("1 beforCreate 创建Vue实例，但是未进行数据的观测"+this.msg); 20 21 22 }, 23 24 25 created(){ 26 alert("2 created创建Vue实例，进行数据的观测了"+this.msg); 27 28 29 30 }, 31 32 beforeMount(){ 33 alert("3 beforeMount挂载vue实例前"+this.msg+this.$refs.msgText.innerText); 34 35 }, 36 mounted(){ 37 alert("4 mounted已经挂载vue实例了"+this.msg+this.$refs.msgText.innerText); 38 39 40 }, 41 beforeUpdate(){ 42 alert("5 beforeUpdate数据更新前"+this.msg+this.$refs.msgText.innerText); 43 44 }, 45 updated(){ 46 alert("6 updated数据更新后"+this.msg+this.$refs.msgText.innerText); 47 48 49 }, 50 beforeDestroy(){ 51 alert("7 beforeDestroy 销毁前"); 52 }, 53 destroyed(){ 54 alert("8 destroyed 销毁后"); 55 56 57 }, 58 methods:{ 59 onDestroy(){ 60 61 this.$destroy(); 62 } 63 64 65 66 } 67 68 69 70 71 }) 72 73 74 } 75 </script> 76 </head> 77 <body> 78 <div > 79 <input type="text" v-model="msg" /><br /> 80 <!--<h1>{{msg}}</h1>--> 81 <h1 ref=‘msgText‘>{{msg}}</h1> 82 <button @click="onDestroy">销毁</button> 83 84 85 86 87 </div> 88 </body> 89 </html>
原文：https://www.cnblogs.com/jiguiyan/p/10713775.html
