實測Vue生命週期

二哈哈哈哈發表於2019-01-02
Vue
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
           
        </style>    
    </head>
    <body>
        <div id="app">
           <label>生日</label>
           <input type="date" v-model="birthday"/>
            <div>當前使用者{{getAge}}週歲了</div>
            <custom-el v-if="show">
                <span>測試測試測試</span>
            </custom-el>
        </div>
        <script>
            //監聽全域性異常
           Vue.config.errorHandler = function (err, vm, info) {
                console.log(err)
            }
            //自定義元素，用於測試銷燬元素生命週期
            Vue.component("custom-el",{
                data:function(){
                    return {
                        msg:'dddddddd'
                     }
                },
                created:function(){
                    //丟擲錯誤，驗證 異常捕獲鉤子
                    throw new Error("測試異常捕獲鉤子")
                },
                template:`
                   <div>
                   <span>{{msg}}</span>
                   <slot></slot></div>
                `
            })
          
            var app = new Vue({
                el:"#app",
                data:function(){
                    return {
                        birthday:'2010-10-10',
                        show:true
                    }
                },
                beforeCreate:function(){
                    //建立之前，無法拿到 $data 與 $el
                    console.log("beforeCreate")
                    console.log(this.birthday)
                    console.log(this.$el)
                },
                created:function(){
                    //建立之前，只能拿到$data ，但無法拿到$el
                    console.log("created")
                    console.log(this.birthday)
                    console.log(this.$el)
                },
                beforeMount:function(){
                    //掛載之前，可以拿到$data與$el，但是$el是未解析的虛擬dom
                    console.log("beforeMount")
                    console.log(this.birthday)
                    console.log(this.$el)
                },
                mounted:function(){
                    console.log(this)
                    //掛載之後，可以拿到$data與$el,此時$el為已被解析的真實dom
                    console.log("beforeMount")
                    console.log(this.birthday)
                    console.log(this.$el)
                },
                beforeUpdate:function(){
                    //在$data已經修改，但是元件dom並未更新渲染時呼叫
                    console.log("beforeUpdate")
                    console.log(JSON.stringify(this.$data))//新的資料
                    console.log(this.$el.innerHTML)//原始dom
                },
                updated:function(){
                    //在$data已經修改，元件dom已被重新渲染之後呼叫
                    console.log("updated")
                    console.log(JSON.stringify(this.$data))//新的資料
                    console.log(this.$el.innerHTML)//新的dom,不能保證所有子元件被重新渲染
                    this.$nextTick(function(){
                        console.log(this.$el.innerHTML)//新的dom,可以保證所有子元件被重新渲染了
                    })
                },
                //此處存在問題，並未驗證出來beforeDestroy與destroyed的區別
                beforeDestroy:function(){
                    //例項銷燬之前被呼叫，這一步，例項仍然完全可用
                    console.log("beforeDestroy")
                    this.birthday = '2014-11-11'
                },
                destroyed:function(){
                    //Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，
                    //所有的事件監聽器會被移除，所有的子例項也會被銷燬。
                    console.log("destroyed")
                },
                errorCaptured:function(err,vm,info){
                    //當捕獲一個來自子孫元件的錯誤時被呼叫
                    console.error(err)
                    //如果返回false，則會阻止錯誤繼續向上傳播，否則會被全域性errorHandler捕獲
                    return true;
                },
                methods:{
                   
                },
                computed:{
                  getAge:function(){
                      if(this.birthday){
                        let date = new Date();
                        let birth = new Date(this.birthday)
                        let m1 = date.getMonth()
                        let m2 = birth.getMonth()
                        let et = m1>m2?0:1
                        if(m1==m2 && data.getDate() > birth.getDate()){
                            et = 0;
                        }
                        return date.getFullYear() - birth.getFullYear() - et
                      }
                      return 0;
                  }
                },
                filters:{
                   
                }
            })
        </script>
    </body>
</html>
複製程式碼

相關文章