vue生命週期函數

<template>
    <!-- 全部的內容要被根節點包含起來 -->
    <div id="life">

          生命週期函數的演示    ---{{msg}}

        <br>
          <button @click="setMsg()">執行方法改變msg</button>
    </div>

</template>


<script>
    
/*

  生命週期函數/生命週期鉤子： 

    組件掛載、以及組件更新、組件銷燬、的時候觸發的一系列的方法  這些方法就叫作生命週期函數
*/
    export default{

        data(){

            return{

                msg:'msg'
            }
        },
        methods:{
            setMsg(){
                this.msg="我是改變後的數據"
            }

        },      

        beforeCreate(){
            console.log('實例剛剛被建立1');
        },
        created(){
            console.log('實例已經建立完成2');
        },
        beforeMount(){
            console.log('模板編譯以前3');
        },
        mounted(){     /*請求數據，操做dom , 放在這個裏面  mounted*/
            console.log('模板編譯完成4');
        },
        beforeUpdate(){
            console.log('數據更新以前');
        },
        updated(){
            console.log('數據更新完畢');
        },
        beforeDestroy(){   /*頁面銷燬的時候要保存一些數據，就能夠監聽這個銷燬的生命週期函數*/
            console.log('實例銷燬以前');
        },
        destroyed(){
            console.log('實例銷燬完成');
        }


    }
</script>