vue生命周期钩子函数附图解

作者: xiaoaiai | 来源:发表于2017-08-12 00:59 被阅读91次

vue 获取节点获取事件
详细的分析 Vue生命周期
深入浅出Vue生命周期钩子函数
Vue的生命周期与钩子函数
什么是生命周期钩子函数？
Vue生命周期
vue生命周期分析
😄--前端面试整理--VueJs
vue生命周期
生命周期

之前我发过vue生命周期图没有代码让大家测试，今天附上代码大家可以更清楚

先上生命周期图

1.png
这里附上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!--vue2.3-->
        <div id="app">
            <button @click="update">更新组件</button>
            <button @click="destroy">销毁组件</button>
            <p>{{msg}}</p>
        </div>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    msg:'hello Vue'
                },
                methods:{
                    update(){
                        this.msg = 'update vue'
                    },
                    destroy(){
                        this.$destroy()
                    }
                },
                beforeCreate(){
                    console.log('实例刚刚被创建,属性都没有')
                },
                created(){
                    console.log('实例刚刚被创建，属性已经绑定')
                },
                beforeMount(){
                    console.log('模板编译之前')
                },
                mounted(){
                    console.log('模板编译之后')
                },
                beforeUpdate(){
                    console.log('组件更新之前')
                },
                updated(){
                    console.log('组件更新之后')
                },
                beforeDestroy(){
                    console.log('组件销毁前')
                },
                destroyed(){
                    console.log('组件销毁后')
                }
                
            })
        </script>
    </body>
</html>