Vue基础----生命周期

2021/12/13 23:23:43

编程Tag： vue data 生命周期 console el log ---- 阶段

本文主要是介绍Vue基础----生命周期，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

什么是生命周期？

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

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实例销毁后调用，此时所有实例指向的所有东西都会被解除

这篇关于Vue基础----生命周期的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue基础----生命周期

什么是生命周期？

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

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

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

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

相关编程文章