跟着大佬技术胖学vue系列 Vue生命周期

246 阅读1分钟

Vue生命周期

每天学一点,自己总结一下。记录一个萌新的爬坑之路,如果有错欢迎各位大佬指正O(∩_∩)O

生命周期

在vue中一共有10个生命周期,直接上代码,比较直观

    {{count}}
    <p><button @click="add">add</button></p>
    <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>

其中activated,deactivated,主要用于组件,以后补充。

实际效果如图:

生命周期等以后遇到相关问题,继续回来补课。先记录到这里。

结语

每天记录一下学了什么,希望有所进步。萌新有说不清楚或者说错的地方欢迎大佬们吊打。??