Vue生命周期

最新推荐文章于 2025-08-15 10:40:51 发布

原创最新推荐文章于 2025-08-15 10:40:51 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这篇文章详细介绍了Vue.js组件从创建到销毁的各个生命周期钩子函数，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。在不同阶段，可以进行的数据初始化、DOM操作以及资源清理等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生命周期

1.beforeCreate（）{}

初始化之前，data中的数据和methods中的方法不能拿到，还没有初始化
应用：页面重定向

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeCreate() {
                console.log(this);  // Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy(Vue$3), _self: Vue$3, …}
                console.log(this.msg); // undefined
                console.log('11111'); // 11111
            }
        })
    </script>
</body>

2.created（）{}

初始化完成，data和methods已经初始化完成，第一个可以调用data和methods的生命周期
应用：数据请求，数据初始化

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            created() {
                this.msg = 20
                console.log(this);  // Vue$3 {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy(Vue$3), _self: Vue$3, …}
                console.log(this.msg); // 20
                console.log('22222'); // 22222
            }
        })
    </script>
</body>

3.beforeMount（）{}

虚拟的DOM挂载，页面中数据还没有挂载，内存已编译完成，页面中还未渲染新的数据

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeMount() {
                console.log('333333'); // 333333
            }
        })
    </script>
</body>

4.mounted（）{}

真实的DOM，内存中编译好的模板渲染到浏览器页面中，第一个可以操作DOM元素的生命周期，如果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            mounted() {
                console.log('44444'); // 44444
            }
        })
    </script>
</body>

5.beforeUpdate（）{}

更新之前，data中数据是最新的，页面中数据还是旧的，未同步，可以执行0次或多次

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeUpdate() {
                console.log('55555'); // 55555
            }
        })
    </script>
</body>

6.updated（）{}

更新之后，页面中和data中数据保持同步，都是最新的，可以执行0次或多次

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            updated() {
                console.log('66666'); // 66666
            }
        })
    </script>
</body>

7.beforeDestroy（）{}

销毁之前
应用：清空定时器，页面监听

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            }
        })
    </script>
</body>

8.destroyed（）{}

销毁之后

<body>
    <div id='app'>
        {{msg}}
        <input type="text" v-model="value">
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: 10,
                value: ''
            },
            methods: {
            }
            destroy() {
                console.log('destroy');
            }
        })
    </script>
</body>