vue生命周期源码浅析

  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