Vue基础----生命周期

最新推荐文章于 2024-06-14 10:39:01 发布

B.Bz

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量748

点赞数

分类专栏： Vue框架笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/bjsyc123456/article/details/121914775

版权

Vue框架笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

什么是生命周期？

我们把一个对象从生成到被销毁的过程，称为生命周期。而生命周期函数，就是在某个时刻会自动执行的函数。

beforeCreate() 和 created() 创建阶段:

生命周期函数	这个阶段发生了什么？
beforeCreate()	这个阶段`data中的数据`和`methods中的方法`都还没有初始化，Vue实例刚在内存中创建
created()	这个阶段`data中的数据`和`methods中的方法`已经初始化完成，Vue实例已经创建好了，模板还没有编译

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <father></father>
    </div>
</body>
<script>
    Vue.component('Father', {
        template: `
        <div class="father">
            <h3>我是父组件</h3>
            <son></son>
        </div>
        `,
    })

    Vue.component('Son', {
        template: `
        <div class="son">
            <h3>我是子组件</h3>
        </div>
        `,
        data() {
            return {
                message: '我是原始的数据：张三'
            }
        },
        methods: {
            btnClick() {
                console.log("我是子组件的方法");

            }
        },
        beforeCreate() {
            console.log('beforeCreate阶段');
            // 这个阶段data中的数据和methods中的方法都还没有初始化  Vue实例刚在内存中创建
            console.log(this.message);
            console.log(this.btnClick);
            console.log(this.$el);
            console.log(document.querySelector('#app').innerHTML);
            console.log('-----------------------');
        },
        created() {
            // 这个阶段data中的数据和methods中的方法已经初始化完成  Vue实例已经创建好了  模板还是没有编译
            console.log('created阶段');
            console.log(this.message);
            console.log(this.btnClick);
            console.log(this.$el);
            console.log(document.querySelector('#app').innerHTML);
            console.log('-----------------------');
        },
    })
    new Vue({
        el: '#app'
    })
</script>

</html>

在这里插入图片描述

beforeMount() 和 mounted() 的挂载阶段:

生命周期函数	这个阶段发生了什么？
beforeMount()	这个阶段`完成了模板的编译`，但是`没有挂载到页面上`
mounted()	这个阶段 `模板编译好并挂载到了页面中`，页面可以正常显示了

        beforeMount() {
            // 这个阶段完成了模板的编译，但是没有挂载到页面上
            console.log('beforeMount阶段');
            console.log(this.message);
            console.log(this.btnClick);
            // 组件还没有创建完
            console.log(this.$el);
            console.log(document.querySelector('#app').innerHTML);
            console.log('-----------------------');
        },
        mounted() {
            // 这个阶段  模板编译好并挂载到了页面中，页面可以正常显示了
            console.log('mounted阶段');
            console.log(this.message);
            console.log(this.btnClick);
            // this.$el为整个组件
            console.log(this.$el);
            console.log(document.querySelector('#app').innerHTML);
            console.log('-----------------------');
        },

在这里插入图片描述

beforeUpdate() 和 updated() 的更新阶段:

生命周期函数	这个阶段发生了什么？
beforeUpdate()	状态更新之前执行这个阶段data中的数据已经更新但是还没有渲染到DOM上
updated()	状态更新完成后执行这个阶段data和DOM中的节点数据都是更新后的

        beforeUpdate() {
            // 状态更新之前执行  这个阶段data中的数据已经更新  但是还没有渲染到DOM上
            console.log('beforeUpdate阶段');
            console.log(this.message);
            console.log(this.btnClick);
            console.log(this.$el);
            console.log(document.querySelector('#ppp').innerHTML);
            console.log('-----------------------');
        },
        updated() {
            // 状态更新完成后执行  这个阶段data和DOM中的节点数据都是更新后的
            console.log('updated阶段');
            console.log(this.message);
            console.log(this.btnClick);
            console.log(this.$el);
            console.log(document.querySelector('#ppp').innerHTML);
            console.log('-----------------------');
        },

在这里插入图片描述

beforeDestroy() 和 destroyed() 的销毁阶段:

生命周期函数	这个阶段发生了什么？
beforeUpdate()	销毁阶段之前这个阶段Vue实例还可以使用
updated()	Vue实例销毁后调用，此时所有实例指向的所有东西都会被解除

生命周期流程

在这里插入图片描述

B.Bz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础----生命周期

什么是生命周期？我们把一个对象从生成到被销毁的过程，称为生命周期。而生命周期函数，就是在某个时刻会自动执行的函数。beforeCreate() 和 created() 创建阶段:生命周期函数这个阶段发生了什么？beforeCreate()这个阶段data中的数据和methods中的方法都还没有初始化，Vue实例刚在内存中创建created()这个阶段data中的数据和methods中的方法已经初始化完成，Vue实例已经创建好了，模板还没有编译<!DOC
复制链接

扫一扫