生命周期钩子

最新推荐文章于 2025-12-03 11:05:25 发布

原创最新推荐文章于 2025-12-03 11:05:25 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

一.什么是生命周期？

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能

二.Vue实例生命周期的图示：

三.示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="example">{{message}}
        <script src="./vue.js"></script>
        <script>
            var vm = new Vue({
                el:'#example',
                data:{
                    message:'hello'
                },
                beforeCreate() {
                    console.log('beforeCreate');
                    //此时组件的选项对象还未创建，el和data并未初始化，因此无法访问methods，data,computed等上的方法和数据。
                },
                created() {
                    console.log('created');
                    //数据观测、属性和方法的运算，watch/event事件回调，完成了data数据的初始化，el没有。
                },
                beforeMount() {
                    console.log('beforeMount');
                    //编译模板，把data里面的数据和模板生成html，完成了el和data初始化
                },
                mounted() {
                    console.log('mounted');
                    //挂载完成，mounted只会执行一次。
                },
                beforeUpdate() {
                    console.log('beforeUpdate');
                    //可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程。
                },
                updated() {
                    console.log('updated');
                    //组件更新后调用$destroyed函数，进行销毁
                    //this.$destroy();
                    //由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用
                },
                beforeDestroy() {
                    console.log('beforeDestroy');
                    //这一步还可以用this来获取实例
                    //一般在这一步做一些重置的操作，如清除掉组件中的定时器和监听的dom事件
                },
                destroyed() {
                    console.log('destroyed');
                    //所有的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
                }
            })
        </script>
    </div>
</body>
</html>

含义

【beforeCreate】（创建前）
在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化
【created】（创建后）
在实例创建之后调用。此时已完成数据观测、事件方法，但尚未开始DOM编译，即未挂载到document中
【beforeMount】(载入前)
在mounted之前运行
【mounted】（载入后）
在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档
【beforeUpdate】（更新前）
在实例挂载之后，再次更新实例(例如更新 data)时会调用该方法，此时尚未更新
DOM结构
【updated】（更新后）
在实例挂载之后，再次更新实例并更新完DOM结构后调用
【beforeDestroy】（销毁前）
在开始销毁实例时调用，此刻实例仍然有效
【destroyed】（销毁后）
在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁