vue生命週期鉤子函數一目瞭然

時間 2021-01-06 標籤 vue 生命週期鉤子 vue生命週期的鉤子函數
四對兒生命週期鉤子函數
<script src="js/vue.js"></script>
</head>
<body>
     <div id="box" class="box">
          {{n}}
          <input type="text" ref="txt" v-model="n">     <!--ref 標示節點-->
          <button @click="kill">強制卸載</button>
     </div>
     <script>
     
     new Vue({
          el:"#box",
          data:{
              n:1
          },
           beforeCreate(){
               console.log(" beforeCreate ");
           },
          created(){
              console.log(" created ");
          },
          beforeMount(){
               console.log(" beforeMount ");
          },
          // render(createElement){  //自動發送，寫了會影響原發送信息
          //   return createElement("h2",null,"hello");
          // },
          mounted(){
               console.log("mounted")
                   this.n=6;
                   this.$refs.txt.focus();           //找到節點
                   this.timer = setInterval(()=>{
                        console.log(1111)
                   },1000)
          },
          beforeUpdate(){
              console.log("beforeUpdate")
          },
          updated(){
              console.log("updated")
          },
          beforeDestroy(){
              console.log("beforeDestroy");
              clearInterval(this.timer);  //銷燬時，觸發beforeDestory函數執行
          },
          destroyed(){
              console.log("destroyed")
          },
          methods:{
              kill(){
                   this.$destroy();  //銷燬this指這個vue組件
              }
          }
     })
     </script>
</body>
下圖爲轉載：