Vue全局API-生命周期

作者: PZcoder | 来源:发表于2020-04-12 18:06 被阅读0次

Vue全局API-生命周期
华云
(一)Vue.directive指令(自定义指令)
Vue全局API-自定义指令
Vue2.0的改变
vue生命周期
vue生命周期
Vue生命周期
Vue自定义指令
2018-06-28 Vue源码解析阅读笔记

Vue 生命周期

<body>
    <h1>Vue 生命周期<h1>
    <hr>
    <div id="app">
        {{count}}
        <p><button @click="add">add</button></p>
    </div>
    <button onclick="app.$destroy()">销毁</button>

    <script type="text/javascript">
    
        var app = new Vue({
            el:'#app',
            data:{
                count:1,
            },
            methods:{
                add:function(){
                    this.count++;
                }
            },
            
            beforeCreate:function(){
                console.log("1-beforeCreate 初始化之前");
            },
            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 数据已更新");
            },
            activated:function(){
                console.log("7-activated");
            },
            deactivated:function(){
                console.log("8-deactivated");
            },
            beforeDestroy:function(){
                console.log("9-beforeDestroy 销毁之前");
            },
            destroyed:function(){
                console.log("10-destroyed 销毁之后");
            },
        })
    </script>
</body>