生命周期函数

生命周期函数

生命周期函数代表的是 Vue实例，或者是Vue组件，在网页上各个生命阶段所执行的函数。生命周期函数可分为创建阶段和运行期间以及销毁区间。
其中创建期间的函数由 beforeCreate created beforeMount mouted;
运行期间的函数有： beforeUpdate updated
销毁期间有： beforeDestroy destroyed

创建期间

1. beforeCreate: Vue或者组件刚刚实例化， data、methods都还没有被创建
2. created:
   此时data和methods 已经被创建，可以使用了。模板还没有被编译。
3. beforeMount
   created 的下一个阶段。此时模板已经被编译了 但是并没有被挂到网页上。
4. mouted
   模板代码已经被加载到网页中了，此时创建的所有事件都已经准备好了，网页开始运行了。

运行期间

beforeUpdate：
在网页运行期间， data中的数据可能会进行更新，在这个阶段，数据只是在data中更新了，但是并没有在模板中更新，因此网页中显示的还是之前的。
updated:
数据在 data中更新了，也在网页中更新了。

销毁期间

beforeDestro:
Vue 实例或者是组件在被销毁之前执行的函数，在这一个函数中 Vue或者组件中所有的属性都是可以使用的。
destroyed：
Vue 实例或者是组件在被销毁后执行的。此时Vue实例上所有的东西都会解绑，所有事件都会被一处，所有的子元素都会被销毁。

  <div id="app">        
       <p id="username">{{username}}</p>        
       <input type="text" v-model="username">
         <!-- // 销毁 -->
       <error-views v-bind:message="message" v-if="message"></error-views>        
       <button @click="message=''">点击</button>    </div>


<script>    
     Vue.component('error-views',{        
         props:['message'],        
         template: '<p style="color:red">{{message}}</p>',        
         beforeDestroy(){            
         console.log('hello')        
         }    
       })    
       new Vue({        
            el: "#app",        
            data: {           
                 username:"快乐",            
                 message: "错误信息"
        
            },        
            methods:{            
                 demo:function(){                
                      return "hi!"            
                        }        
                    },        
            // // beforeCreate: Vue或者组件刚刚实例化， data  methods都还没有被创建        
            // beforeCreate(){        
            //     console.log(this.username);        
            //     console.log(this.demo);       
             // },        
             // created(){        
             //     console.log(this.username);        
             //     console.log(this.demo);       
              // },       
               // beforeMount(){        
               //     console.log(document.getElementById('username').innerText)        
               // },        
               // mounted(){        
               //     console.log(document.getElementById('username').innerText)
        
        // },        
        // beforeUpdate(){        
        //     console.log(document.getElementById('username').innerText)        
        // },        
        // updated(){        
        //     console.log(document.getElementById('username').innerText)        
        // },
    
    })
 </script>