vue中所有的钩子函数：

• beforeCreate（创建前）
• created（创建后）
• beforeMount（载入前）
• mounted（载入后）
• beforeUpdate（更新前）
• updated（更新后）
• beforeDestroy（销毁前）
• destroyed（销毁后）

vue官方生命周期图

vue生命周期图

生命周期代码及执行效果

<script>

    export default {
        name: 'HelloWorld',

        data() {
            return {
                msg: 'vue life circle ',
            }
        },
        created() {
        
            console.log("创建后" + this.msg)
        },

        beforeCreate() {
            console.log("创建前"+ this.msg)
        },
        beforeMount() {
            console.log("载入前"+ this.msg)
        },
        mounted() {
            console.log("载入后"+ this.msg)
            this.msg = 'check update function';
        },
        beforeUpdate() {
            
            console.log("更新前"+ this.msg)
        },
        updated() {
            console.log("更新后"+ this.msg)
        },
        beforeDestroy() {
            console.log("销毁前"+ this.msg)
        },
        destroyed() {
            console.log("销毁后"+ this.msg)
        },
        

    }
</script>

vue生命周期执行效果

更新时间: 2018-07-11