Vue基础：生命周期

Gwenh1042

已于 2023-03-08 16:17:48 修改

阅读量54

点赞数

分类专栏：前端学习文章标签： vue.js Powered by 金山文档

于 2023-03-08 09:26:16 首次发布

本文链接：https://blog.csdn.net/Gwenh2/article/details/129396401

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基本概念

1.生命周期

Vue生命周期是指Vue实例对象从创建之初到销毁的过程。

2.生命周期钩子（函数）

生命周期钩子（函数）是指在Vue组件生命周期的不同阶段中被默认调用执行的一些函数，一共有11个。

生命周期钩子函数，让开发者有机会在特定阶段运行自己的代码。函数中的 this，会默认指向Vue的实例。

生命周期详解

1.生命周期总览

[图1] 生命周期详解

流程图引用自： Vue生命周期(11个钩子函数)_清羽_ls的博客-CSDN博客

常用钩子函数有8个：

beforeCreate( )、created( )、beforeMount( )、mounted( )、beforeUpdate( )、updated( )、beforeDestory( )、destoryed( )；

不常用钩子函数有3个：

activited( )、deactivated( )、errorcaptured( )。

2.常用钩子函数（8个）

创建前：

beforeCreate( )：组件实例被创建之初，data 和 methods 中的数据还没有初始化

创建后：

created( )：组件实例已经完全创建，data 和 methods 都已经初始化好了

[ 挂载：把Vue实例生成的虚拟的DOM转成真实的DOM，放在页面中 ]

挂载前：

beforeMount( )：指令已经解析完毕，对el、template判断，内存中已经生成 dom 树，但是尚未挂载到页面中去

挂载后：

mounted( )：dom 渲染完毕，编译出的DOM把原有的DOM替换，页面和内存的数据已经同步，可以获取最终的DOM元素

[ 每次数据更新依次运行beforeUpdate( )、update( )函数，以上4个函数不再运行 ]

更新前：

beforeUpdate( )：组件数据更新之前调用，此时页面中显示的数据还是旧的，但内存中的 data 是最新的，页面数据和内存数据未同步

更新后：

updated( )：组件数据更新之后，页面和 data 数据已经保持同步，都是最新的

销毁前：

beforeDestory( )：Vue实例从运行阶段进入到销毁阶段，定时器被清除，这时Vue实例身上所有事件都可用，还没有真正执行销毁

销毁后：

destoryed( )：观察者、事件监听者被销毁，Vue实例上的所有元素的事件还在，但是更改数据不会再让视图进行更新

代码展示：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>
            {{msg}}
        </div>
        <ul>
            <li v-for="a in arr">{{a}}</li>
        </ul>
        <button @click="fn">点我一下</button>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    msg: "hello",
                    arr: [1, 2, 3, 4]
                }
            },

            // 在这个钩子函数执行之前初始化事件以及生命周期
            beforeCreate() {
                console.log("beforeCreate", "创建之前");
                // 1. 在这个钩子函数中，不能获取data中的数据
                console.log(this.msg);
                // 2. 这个函数不能操作DOM；
                console.log(document.getElementsByTagName("li")[0])
                try {
                    document.getElementsByTagName("li")[0].style.color = "red";
                    console.log("操作DOM完毕");
                } catch (error) {
                    console.log("此时不能操作DOM");
                }
            },

            // 给Vue的实例注入数据，进行数据监听
            created() {
                console.log("created", "创建之后");
                // 1. 可以获取到data中的数据
                console.log(this.msg);
                // 2. 不能操作DOM
                console.log(document.getElementsByTagName("li")[1])
                try {
                    document.getElementsByTagName("li")[1].style.color = "red";
                    console.log("操作DOM完毕");
                } catch (error) {
                    console.log("此时不能操作DOM");
                }
            },

            methods: {
                getData() {

                },
                fn() {
                    this.msg += " world"
                }
            },

            // 执行之前，判断是否有el,template;编译
            beforeMount() {
                console.log("beforeMount", "挂载之前");
                // 不能操作DOM
                console.log(document.getElementsByTagName("li")[2])
                try {
                    document.getElementsByTagName("li")[2].style.color = "red";
                    console.log("操作DOM完毕");
                } catch (error) {
                    console.log("此时不能操作DOM");
                }
            },

            // 挂载完毕，编译出的DOM把原有的DOM替换，可以获取最终的DOM元素
            mounted() {
                console.log("mounted", "挂载之后");
                // 可以操作DOM
                console.log(document.getElementsByTagName("li")[3]);
                try {
                    document.getElementsByTagName("li")[3].style.color = "red";
                    console.log("操作DOM完毕");
                } catch (error) {
                    console.log("此时不能操作DOM");
                }
            },

            // 更新数据之前执行
            beforeUpdate() {
                console.log("beforeUpdate", "更新之前");
                console.log(this.msg)

            },

            // 数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数
            updated() {
                console.log("updated", "更新之后");
            },

            // 销毁之前
            beforeDestroy() {
                console.log("beforeDestroy", "销毁之前"); // 实际看不到

            },

            // 销毁之后
            destroyed() {
                console.log("destroyed", "销毁之后"); // 实际发不出
            }
        }).mount("#app");
    </script>
</body>

</html>