1. 程式人生 > >Vue2.x生命週期

Vue2.x生命週期

<script type="text/ecmascript-6">
export default {
    name: 'Header',
    props:{
        Title:{
            type:String
        }
    },
    data() {
        return {}
    },
    methods:{
        updateTitle:function(){
            //    this.Title="我已經被Footer的點選事件修改了!";
            this.$emit("UpdateFatherTitle","我的內容來自子元件!");
        }
    },
    beforeCreate() {
        // 物件沒有建立前 此時只是對事件做了配置
        // 可以做載入的動畫
        // alert("元件例項化之前執行的函式");
    },
    created() {
        // 元件已經例項化好了 DOM還未生成
        // 可以獲取對應的獲取一些資料 賦給屬性 可以結束loading載入
        // alert("元件例項化完畢,但頁面還未顯示");
    },
    beforeMount() {
        // 編譯當前模板 是在虛擬DOM中
        // alert("元件掛載前 頁面仍未展示 但虛擬DOM已經配置完");
    },
    mounted() {
        // 將el 指定的dom元素 掛載渲染
        // 從後臺獲取資料 在該方法裡填寫
        // alert("此方法執行後 頁面顯示!");
    },
    beforeUpdate() {
        // 元件更新之前
        // alert("元件更新前,頁面仍未更新");
    },
    updated() {
        //元件更新後 頁面就展示了
        // alert("元件更新後 此方法自行後 頁面顯示");
    },
    beforeDestroy() {
        // alert("元件銷燬前");
    },
    destroyed() {
        // ALERT("元件銷燬");
    },

    components: {}
}
</script>

在這裡插入圖片描述