1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 </head> 7 <body> 8 <div id="app"> 9 <h2 id="h2">{{msg}}</h2> 10 <button @click="msg = 'Hello Marte'">改变Msg</button> 11 <hr> 12 13 <!-- <Child v-if="isShow"></Child> --> 14 <!-- keep-alive组件可以将内容进行缓存，提升性能 --> 15 <keep-alive v-if="isShow"> 16 <Child></Child> 17 </keep-alive> 18 <button @click="isShow = !isShow">上下树</button> 19 </div> 20 </body> 21 <script type="text/javascript" src="js/vue.js"></script> 22 <script type="text/javascript"> 23 24 Vue.component('Child', { 25 template: '<div>我是Child子组件</div>', 26 beforeDestroy(){ 27 console.log("组件销毁前") 28 }, 29 destroyed(){ 30 console.log("组件销毁后") 31 }, 32 activated(){ 33 console.log('keep-alive组件激活（上树）了') 34 }, 35 deactivated(){ 36 console.log('keep-alive组件停用（下树）了') 37 } 38 39 }) 40 41 // 创建Vue实例，得到ViewModel 42 var vm = new Vue({ 43 el: '#app', 44 data: { 45 msg: 'Hello', 46 isShow: true 47 }, 48 methods: { 49 show(){ 50 console.log('执行show方法') 51 } 52 }, 53 54 /********** 创建实例阶段的生命周期（4个） ***********/ 55 beforeCreate(){ 56 // 这是我们遇到的第1个生命周期函数，表示实例被创建出来之前会被触发 57 // 在此阶段生命周期中，DOM、data 和 methods 还没被初始化 58 console.log(this.$el); //undefined 59 console.log(this.msg); //undefined 60 // this.show(); //this.show is not a function 61 }, 62 63 created(){ 64 // 在此阶段生命周期中，data 和 methods 已经被初始化完毕，但DOM还没有 65 // 如果要调用methods的方法 和 操作data中的数据，最早也只能在 created 中操作 66 console.log(this.$el); //undefined 67 console.log(this.msg); //Hello 68 this.show(); //可以被触发了 69 }, 70 71 beforeMount(){ 72 // 遇到的第3个生命周期，表示模板已经在内存中编译完成，但还没把模板渲染到页面中 73 // 页面中的内容还没被真正替换，依然是旧的，只是之前写的模板字符串 "{{msg}}" 74 console.log(document.getElementById('h2').innerHTML) 75 }, 76 77 mounted(){ 78 // 第4个生命周期，表示内存中的模板，已经真实挂载到页面上，用户可以看见渲染好的页面了 79 // 它是实例创建的最后一个生命周期，当执行完毕mounted就表示实例已经都完成创建了 80 // 如果没有其他操作，这个实例就静静的待在内存中 81 console.log(document.getElementById('h2').innerHTML); //Hello 82 }, 83 84 beforeUpdate(){ 85 // 此阶段表示页面还没被更新，但数据已经更新了 86 // 所以当执行beforeUpdate时，页面显示的数据还是旧的 87 // 但此时data数据是新的，不过页面还没和最新的数据进行同步 88 console.log('页面上的内容：', document.getElementById('h2').innerHTML) 89 console.log('data中的msg数据：', this.msg) 90 }, 91 92 updated(){ 93 // update生命周期被执行后，页面和data数据已经同步，都是最新的 94 console.log('页面上的内容：', document.getElementById('h2').innerHTML) 95 console.log('data中的msg数据：', this.msg) 96 } 97 98 }) 99 </script> 100 </html>
https://www.cnblogs.com/happ0/p/8075562.html