vue中的生命周期函数

Ocean__Lv

于 2022-12-08 10:38:50 发布

阅读量153

点赞数

分类专栏： # vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/TeFuir__Lv/article/details/128232663

版权

vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1. 什么是生命周期函数

在vue实例化过程中的某个时间点会自动触发的函数

2. 生命周期的三个阶段及相关的钩子(生命周期函数)

创建阶段 (只执行一次)

beforeCreate
created
beforeMount
mounted

运行阶段（可以依据数据的变化执行多次）

beforeUpdate
updated

销毁阶段（最多执行一次）

beforeDestroy
destroyed

3. 每个生命周期函数的特点

3.1. beforeCreate

创建之前，在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化，不能访问data数据

beforeCreate(){
    console.log('beforeCreate',this.msg);
},

3.2. created

创建之后，data和methods中的数据已经初始化，此时可以访问data数据
一般在这个函数中发起ajax请求

created(){
    console.log('created',this.msg);
},

3.3. beforeMount

挂载之前，表示模板已经在内存中编译完成，但尚未把模板渲染到页面中。
此时还没有渲染用数据生成的新dom

beforeMount(){
    console.log('beforeMount',this.$el);
},

3.4. mounted

表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
此时可以访问dom

mounted(){
    console.log('mounted',this.$el);
},

3.5. beforeUpdate

当且仅当data被修改时才触发这个生命周期函数，但此时仅仅是数据被修改，页面还未更新。
如果修改的data数据并没有在模板中使用，也不会触发更新

beforeUpdate(){
    console.log('beforeUpdate',this.msg);
    console.log('beforeUpdate',this.$el.innerHTML);
},

3.6. updated

会根据新数据生成最新的内存DOM树，重新渲染到真实的页面中去，此时的data数据和页面已完成同步

updated(){
    console.log('updated',this.$el.innerHTML);
},

3.7. beforeDestroy

当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段。
当执行beforeDestory的时候，实例身上所有的data和所有的methods，以及过滤器、指令…都处于可用状态，此时还没有真正执行销毁过程。

beforeDestroy(){
    console.log('beforeDestroy');
},

3.8. destroyed

当执行到destoryed函数的时候，组件已经被全部销毁了，data与methods均不可用。
更改data数据，页面不会更新

destroyed(){
    console.log('destroyed');
}

4. 练习代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
        参考： https://www.cnblogs.com/Syinho/p/12482012.html
        生命周期函数： 在vue实例化过程中的某个时间点会自动触发的函数
        有四组：

        创建阶段
            beforeCreate
            created

            beforeMount
            mounted

        运行阶段 
            beforeUpdate
            updated

        销毁阶段
            beforeDestroy
            destroyed
     -->
    <div id="app">
        <p><button @click="changeData">改变数据</button></p>
        <p><button @click="destroy">销毁实例</button></p>
        {{msg}}
        <ul>
            <li v-for="item in color">{{item}}</li>
        </ul>
    </div>

    <hr>

    <div id="app1">
        
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            // template: `
            //     <h1>{{msg}}</h1>
            // `,
            data: {
                msg: 'hello',
                num: 1,
                color: ['red','green']
            },
            methods: {
                changeData(){
                    // this.msg = Date.now()  //触发更新
                    this.age = 23 //不会触发更新，因为不是data数据
                    this.num = Date.now() //也不会触发更新，因为虽然是data数据，可是没有在模板中使用
                },
                destroy(){
                    //销毁实例
                    this.$destroy()
                }
            },
            // 创建之前，在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化，不能访问data数据
            beforeCreate(){
                console.log('beforeCreate',this.msg);
            },
            //创建之后，data和methods,computed,watch中的数据已经初始化，此时可以访问data数据
            // 一般在这个函数中发起ajax请求
            created(){
                console.log('created',this.msg);
            },
            // 挂载之前，表示模板已经在内存中编译完成，但尚未把模板渲染到页面中。
            // 此时还没有渲染用数据生成的新dom,在此时访问dom没有意义
            beforeMount(){
                console.log('beforeMount',this.$el);
            },
            // 挂载完毕 ，表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
            // 此时可以访问dom
            mounted(){
                console.log('mounted',this.$el);
            },
            // 更新之前，当且仅当data被修改时才触发这个生命周期函数，但此时仅仅是数据被修改，页面还未更新。
            beforeUpdate(){
                console.log('beforeUpdate',this.msg);
                console.log('beforeUpdate',this.$el.innerHTML);
            },
            // 更新之后， 会根据新数据生成最新的内存DOM树，重新渲染到真实的页面中去，
            // 此时的data数据和页面已完成同步
            updated(){
                console.log('updated',this.$el.innerHTML);
            },
            // 销毁之前，当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段。
            // 当执行beforeDestory的时候，实例身上所有的data和所有的methods，以及过滤器、指令...都处于可用状态，此时还没有真正执行销毁过程。
            beforeDestroy(){
                console.log('beforeDestroy');
            },
            // 销毁之后，当执行到destoryed函数的时候，组件已经被全部销毁了，data与methods均不可用。
            // 更改data数据，页面不会更新
            //应用： 清除定时器
            destroyed(){
                console.log('destroyed');
            }
        });


        //调用实例的$mount方法来设置挂载点
        // vm.$mount("#app")
    </script>
</body>

</html>