首先一张官方图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>vue生命周期学习</title> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <h1 id="message">{{msg}}</h1> 13 <input type="button" value="修改" @click="msg='change'"> 14 <input type="button" value="销毁" @click="destory"> 15 </div> 16 </body> 17 <script> 18 var vm = new Vue({ 19 el:'#app', 20 data(){return { 21 msg:'Vue生命周期' 22 }}, 23 methods:{ 24 show(){ 25 console.log('执行 show 方法'); 26 }, 27 destory(){ 28 this.$destroy(); 29 } 30 }, 31 beforeCreate(){ 32 //生命周期第一个函数,实例被创建 '之前' ,会执行它 33 //注意:执行函数时 data 和 methods 还没有被初始化 34 console.log('1:'+this.msg); //undefined 35 this.show(); //报错 36 }, 37 created(){ 38 //生命周期的第二个函数,实例被创建 '之后', 39 //注意:执行函数时data 和 methods 初始化完成 40 console.log('2:'+this.msg); //Vue生命周期 41 this.show(); //执行 show 方法 42 }, 43 beforeMount(){ 44 //生命周期的第三个函数,模板已经在内存中编辑完成 45 //注意:模板仅在存在于内存中,但还未把模板渲染到页面 46 var message = document.getElementById('message'); 47 console.log('3:'+message.innerText); //{{msg}} 48 }, 49 mounted(){ 50 //生命周期第四个函数,模板已经在内存中编辑完成,并渲染结束 51 //注意:当mounted 执行完后表示实例已经完全创建好了,会在内存中等待下一个操作 52 var message = document.getElementById('message'); 53 console.log('4:'+message.innerText); //Vue生命周期 54 }, 55 beforeUpdate(){ 56 //接下来的两个事件为更新前后事件 57 //注意:当执行beforeUpedate 页面中显示的数据是旧的,内存中是新的 58 console.log("5:内存中data变量:"+this.msg); 59 var message = document.getElementById('message'); //内存中data变量: change 60 console.log("5:模板中的数据:"+message.innerText); //模板中的数据: Vue生命周期 61 }, 62 updated(){ 63 console.log("6:内存中data变量:"+this.msg); 64 var message = document.getElementById('message'); //内存中data变量: change 65 console.log("6:模板中的数据:"+message.innerText); //模板中的数据: change 66 }, 67 beforeDestroy:function(){ 68 console.log('7:beforeDestory:销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、清除非指令绑定的事件等等...') 69 // clearInterval(this.$options.timer) 70 }, 71 destroyed:function(){ 72 console.log('8:destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳,这里也可以善后') 73 } 74 }) 75 </script> 76 </html>
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。