【前端框架学习】生命周期函数 中 组件运行与销毁时的钩子函数

组件创建时的钩子函数：【前端框架学习】生命周期函数 及组件创建时的钩子函数_Jerry‘s word-CSDN博客摘要https://blog.csdn.net/qq_38594872/article/details/122739854?spm=1001.2014.3001.5501

 

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

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

一、组件运行时的钩子函数触发时间

1.beforeUpdate

这时候，表示我们的界面还没有被更新。那么此时的数据被更新了吗？答案是肯定的，因为数据永远都是最新的。
我们首先写一个beforeUpdate函数来读取h3中message的内容：

（放在methods之后）

            beforeUpdate(){
                console.log('界面上的内容：'+document.getElementById('h3').innerText);
                console.log('data中的msg数据是：' + this.message);
            }

运行可以发现并没有输出，这是因为data数据发生改变以后才会执行beforeUpdate中的内容。

我们为h3添加一个按钮用于修改message的内容：

<input type="button" value="修改msg" @click="message='hello,Java!'">

运行代码之后，页面上的内容已经发生了改变，但是两个输出内容并不一致，这是是什么呢。

这是因为，当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时
data数据是最新的，页面尚未和最新的数据保持同步。

2.updated

updated事件执行的时候，页面和data数据已经保持同步了，都是最新的。

        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello,Vue!"
            },
            methods: {
                create() {
                    console.log('hello,world!');
                }
            },
            updated() {
                console.log('界面上的内容：' + document.getElementById('h3').innerText);
                console.log('data中的msg数据是：' + this.message);
            }
        });

二、组件销毁时的钩子函数触发时间

1.beforeDestroy和destroyed

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

        当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据、方法、指令、过滤器…都已经不可用了。

三、总结