【前端框架学习】生命周期函数及组件创建时的钩子函数

本文链接：https://blog.youkuaiyun.com/qq_38594872/article/details/122739854

一、相关定义

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子：就是生命周期事件的别名而已。

二、生命周期函数的分类

1.创建期间的生命周期函数

beforeCreate	实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性
created	实例已经在内存中创建OK，此时data和methods已经创建OK，此时还没有开始鳊译模板
beforeMount	此时已经完成了模板的编译，但是还没有挂载到页面中
mounted	此时，已经将编译好的模板，挂载到了页面指定的容器中显示

2.运行期间的生命周期函数

beforeUpdate	状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated	实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

3.销毁期间的生命周期函数

beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

三、通过实例理解生命周期函数的触发时间

首先，我们创建一个vm实例:

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello,Vue!"
            },
            methods: {
                create(){
                    console.log('hello,world!');
                }
            }
        });
    </script>

1.beforeCreate

这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它。

        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello,Vue!"
            },
            methods: {
                create(){
                    console.log('hello,world!');
                }
            },
            beforeCreate(){
                console.log(this.message);
                this.create();
            }
        });

运行上面这段代码，在浏览器的控制台中可以得到下面的结果：

提示我们message和create函数未定义。

这是因为在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有没初始化。

2.created

我们遇到的第二个生命周期函数是created。

        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello,Vue!"
            },
            methods: {
                create() {
                    console.log('hello,world!');
                }
            },
            created() {
                console.log(this.message);
                this.create();
            }
        });

运行上面的代码，与beforeCreate不同，这个时候控制台已经能准确打印出message和create的内容了。
这是因为在created中，data和methods都已经被初始化好了；
如果要调用methods中的方法，或者操作 data中的数据，最早，只能在created中操作。

3.beforeMount

这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。

        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello,Vue!"
            },
            methods: {
                create() {
                    console.log('hello,world!');
                }
            },
            beforeMount(){
                console.log(document.getElementById('h3').innerText);
            }
        });

    <div id="app">
        <h3 id="h3">
            {{message}}
        </h3>
        
    </div>

在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串。此函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时，页面还是旧的。

4.mounted

这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。

        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello,Vue!"
            },
            methods: {
                create() {
                    console.log('hello,world!');
                }
            },
            mounted() {
                console.log(document.getElementById('h3').innerText)
            }

        });

    <div id="app">
        <h3 id="h3">
            {{message}}
        </h3>
        
    </div>

注意： mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动。