生命周期 | snowFlakeXue

生命周期又叫钩子函数，就是在某个节点进行某个操作，这里讲的是构造器里的生命周期，总共有十个，有两个需结合组件学习(activated,deactivated)，所以先学八个

avatar

<body>
    <div id="app">
        <p>{{count}}</p>
        <button @click="add">增加</button>
    </div>
    <!-- 注意是onclick不是@click -->
    <button onclick="app.$destroy()">销毁</button>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                count:1
            },
            methods:{
                add:function(){
                    this.count++;
                }
            },
            //注意要写在构造器里
            beforeCreate:function(){
                console.log('1-beforeCreat')
            },
            created:function(){
                console.log('2- created')
            },
            beforeMount:function(){
                console.log('3-beforeMount')
            },
            mounted:function(){
                console.log('4-mounted')
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate')
            },
            updated:function(){
                console.log('6-updated')
            },
            beforeDestroy:function(){
                console.log('7-beforeDestroy')
            },
            destroyed:function(){
                console.log('8-destroyed')
            }
        })

    </script>
</body>

结果： avatar