GuLi商城-前端基础Vue-生命周期和钩子函数

我不是女神ヾ 2024-03-24 18:31 116阅读 0赞

![1cf180b315e147f3a46b0cf93d21a021.png][]

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它

的参考价值会越来越高。

![format_png][]

VUE 的生命周期指的是组件在创建、运行和销毁过程中所经历的一系列事件，通过这些事件可以

让开发者在不同阶段进行相应的逻辑处理。VUE 组件的生命周期分为 8 个阶段：

*  beforeCreate：组件实例刚被创建，但是数据还未初始化。在这个阶段，无法访问到 data 和 methods 等组件属性。
 *  created：组件的数据已经初始化完成，但是 DOM 元素还未生成。可以进行一些异步操作，如发送 AJAX 请求获取数据等。
 *  beforeMount：组件即将被挂载到页面上。在这个阶段，所有的模板和组件都已经编译成 render 函数，并准备好渲染。
 *  mounted：组件已经挂载到页面上，此时可以访问到组件的 DOM 元素。可以进行一些需要访问 DOM 元素的操作，如使用第三方插件等。
 *  beforeUpdate：组件更新之前被调用，在此时可以对组件进行更新前的状态和数据进行处理。
 *  updated：组件更新完毕后被调用。在此阶段中不能再更新组件的数据，否则会导致死循环。
 *  beforeDestroy：组件即将被销毁，在此时可以进行一些清理工作，如清除定时器、解绑事件等。
 *  destroyed：组件已经被销毁，此时所有的事件监听和子组件都已经被移除。

掌握 VUE 组件的生命周期可以帮助开发者更好地理解组件的运行机制，在不同阶段进行相应的逻

辑处理，从而实现更加灵活、高效的组件开发。

[Vue到底是什么？优缺点是什么？ - 知乎][Vue_ -]

--------------------

![64b29b9f0a744e0f9379862ce89e40c8.png][]

![358c6c56f1bb4f44936e86dd6330a3c7.png][]

![1c9add8613c64296909d4e3ab5f454fc.png][]![201c838db92248229b1829840dbee0e4.png][]

<!DOCTYPE html>
    <html lang="en">
    
    <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>
        <div id="app">
            <span id="num">{
       {num}}</span>
            <button @click="num++">赞！</button>
            <h2>{
       {name}}，有{
       {num}}个人点赞</h2>
        </div>
    
        <script src="../node_modules/vue/dist/vue.js"></script>
        
        <script>
            let app = new Vue({
                el: "#app",
                data: {
                    name: "张三",
                    num: 100
                },
                methods: {
                    show() {
                        return this.name;
                    },
                    add() {
                        this.num++;
                    }
                },
                beforeCreate() {
                    console.log("=========beforeCreate=============");
                    console.log("数据模型未加载：" + this.name, this.num);
                    console.log("方法未加载：" + this.show());
                    console.log("html模板未加载：" + document.getElementById("num"));
                },
                created: function () {
                    console.log("=========created=============");
                    console.log("数据模型已加载：" + this.name, this.num);
                    console.log("方法已加载：" + this.show());
                    console.log("html模板已加载：" + document.getElementById("num"));
                    console.log("html模板未渲染：" + document.getElementById("num").innerText);
                },
                beforeMount() {
                    console.log("=========beforeMount=============");
                    console.log("html模板未渲染：" + document.getElementById("num").innerText);
                },
                mounted() {
                    console.log("=========mounted=============");
                    console.log("html模板已渲染：" + document.getElementById("num").innerText);
                },
                beforeUpdate() {
                    console.log("=========beforeUpdate=============");
                    console.log("数据模型已更新：" + this.num);
                    console.log("html模板未更新：" + document.getElementById("num").innerText);
                },
                updated() {
                    console.log("=========updated=============");
                    console.log("数据模型已更新：" + this.num);
                    console.log("html模板已更新：" + document.getElementById("num").innerText);
                }
            });
        </script>
    </body>
    
    </html>

![49a11cbf27554682a88e0d226d42fa62.png][]

[1cf180b315e147f3a46b0cf93d21a021.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/25f4b12997034990a2e2ba351a1461f9.png
[format_png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/37de5ed314ad4d088886122c1750ae8c.png
[Vue_ -]: https://zhuanlan.zhihu.com/p/627746111
[64b29b9f0a744e0f9379862ce89e40c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/e5b115c86b584dd4952559bd3cfae8a6.png
[358c6c56f1bb4f44936e86dd6330a3c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/f3505f8291ac48bea58bd07e5c4f2616.png
[1c9add8613c64296909d4e3ab5f454fc.png]: https://img-blog.csdnimg.cn/1c9add8613c64296909d4e3ab5f454fc.png
[201c838db92248229b1829840dbee0e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/dd7921cd0bf2400f82f228e7b057b5ca.png
[49a11cbf27554682a88e0d226d42fa62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1b78f37d591a4306a08ecdaf661731b5.png