【Vue3从零开始-第二章】2-2 生命周期函数

2022-09-26 172

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第二章】2-2 生命周期函数

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇文章中，讲过了vue应用的基础概念，今天我们要更深入的了解一下vue了。

之前的文章中，也大致用过和了解过部分生命周期函数，在今天的文章中，将会带大家了解vue所有的生命周期函数。

什么是生命周期函数？

在某一时刻会自动执行的函数

触发函数

在之前的代码中，我们会在元素上用v-on:click绑定一个点击事件，当我们点击元素之后就会触发方法中的逻辑。

<script>
    Vue.createApp({
        data(){
            return {
                message: 'Hello World'
            }
        },
        methods: {
            handleClick(){
                alert('点击触发')
            }
        },
        template: "<div v-on:click='handleClick'>{{message}}</div>"
    }).mount('#root');
</script>
复制代码

DVTY0L_9UQ%D$2JID]AL7H4.png

通过上面的代码可以看出，点击事件触发时，是调用的methods里面的函数，下面我们就用mounted函数来简单介绍一下这两者的区别。

<script>
    Vue.createApp({
        data(){
            return {
                message: 'Hello World'
            }
        },
        mounted(){
            alert('mounted函数')
        },
        methods: {
            handleClick(){
                alert('点击触发')
            }
        },
        template: "<div v-on:click='handleClick'>{{message}}</div>"
    }).mount('#root');
</script>
复制代码

7X6PFQY`BTI)0@3CITDRE`P.png

通过刷新浏览器，我们会发现页面中的元素还没加载出来的时候，就自动执行了mounted函数，而且mounted函数是和methods同级的，并不是像其他函数一样包含在methods中的。

生命周期详解

~{8CF}AB9QO~D@})I`ZXP[G.png

此处是生命周期详解的通用代码，下面的生命周期函数或者相关代码都会在此基础上增改。

<!DOCTYPE html>
<html lang="en">
<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>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    Vue.createApp({
        data(){
            return {
                message: 'Hello World'
            }
        },
        // 此处开始写生命周期函数
        // 此处是模板
        template: "<div>{{message}}</div>"
    }).mount('#root');
</script>
</html>
复制代码

首先我们看到的就是创建一个vue实例，紧接着就开始执行vue里面的逻辑了。

第一步：初始化vue代码，分析vue代码是否有一些事件的绑定（如：v-on）或者是上面提到的生命周期函数（如：mounted）

第二步：执行vue中的第一个生命周期函数beforeCreate

beforeCreate：在实例生成之前会自动执行的函数

在代码模板中，写下beforeCreate函数，打开浏览器看看执行效果

beforeCreate(){
   console.log('beforeCreate函数')
},
复制代码

$~8@7L4_2@BB21[{`[XYC$UK.png$

第三步：继续对vue进行初始化，开始分析代码中数据和模板的绑定相关的内容。

第四步：执行vue中的第二个生命周期函数created

created：在实例生成之后会自动执行的函数

在执行完beforeCreate函数之后，会紧接着执行created函数

created(){
   console.log('created函数')
},
复制代码

$F[]_PKV{%%{1W``14AX%A`0.png$

第五步：判断代码中是否有template选项，有则走左侧的yes，无则走右侧的no

第六步：为yes的时候，vue会将template转为一个render函数，变为函数之后，会将数据和这个函数结合，才能把最终的内容渲染出来。

第七步：执行vue中的第三个生命周期函数beforeMount

beforeMount：在组件内容被渲染到页面之前自动执行的函数

在template转为render函数之后，就会执行beforeMount函数

beforeMount(){
   console.log('beforeMount函数')
},
复制代码

$F[]_PKV{%%{1W``14AX%A`0.png$

第八步：用生命周期的函数对数据进行一个结合，生成我们最终想要的一个新的DOM，然后用新的DOM去替换掉body中和vue实例相匹配的DOM（在之前的代码中，是替换掉id=root的div标签），最终页面上展示的就是vue实例想要创建出的内容了。

第九步：当页面挂载完成之后，会执行vue中的第三个生命周期函数mounted

mounted：在组件内容被渲染到页面之后自动执行的函数

在beforeMount执行完成之后，就表示页面已经被渲染出来了，此时就会执行mounted函数

mounted(){
   console.log('mounted函数')
},
复制代码

D_]T}GV6K[XK)(CQ23NFBLG.png

beforeMount和mounted对比

代码运行成功之后，只能看到浏览器上打印出来的顺序，但是不知道页面渲染的情况，那么下面我们就一起来对beforeMount和mounted两个函数做一个对比。

<body>
    <div id="root"></div>
</body>
复制代码

在body里面，是有一个id = root的标签元素

Vue.createApp({
    data(){
        return {
            message: 'Hello World'
        }
    },
    beforeCreate(){
        console.log('beforeCreate函数')
    },
    created(){
        console.log('created函数')
    },
    beforeMount(){
        console.log(document.getElementById('root').innerHTML, 'beforeMount函数')
    },
    mounted(){
        console.log(document.getElementById('root').innerHTML, 'mounted函数')
    },
    template: "<div>{{message}}</div>"
}).mount('#root');
复制代码

在beforeMount和mounted两个函数里面，我们打印一下root下面的innerHTML内容

$C~YTSE%(2GV~87MXXWWUT7.png

通过打印出来的内容可以看出，页面加载完成之后，但是模板还没生成render函数时，beforeMount函数前面是没有打印出任何数据的。在页面渲染完成之后，mounted函数就会打印出root标签下渲染的内容了。

做完上面九个步骤之后，一个完整的vue页面就被渲染出来了，但是我们看到图中还有其他的四个生命周期函数，这四个生命周期函数并不是主动触发的，而是当你有操作之后才会触发的，下面我们就详细讲解一下这四个生命周期函数吧。

beforeUpdate：当data中的数据发生变化时自动执行的函数

首先我们把代码里面的逻辑改造一下，为了后面方便触发函数，并在代码中写上了beforeUpdate函数

const app = Vue.createApp({
    data(){
        return {
            message: 'Hello World'
        }
    },
    beforeCreate(){
        console.log('beforeCreate函数')
    },
    created(){
        console.log('created函数')
    },
    beforeMount(){
        console.log('beforeMount函数')
    },
    mounted(){
        console.log('mounted函数')
    },
    beforeUpdate(){
        console.log('beforeUpdate函数')
    },
    template: "<div>{{message}}</div>"
});
const vm = app.mount('#root');
复制代码

但是在浏览器中，并没有看到beforeUpdate被执行，这时候我们应该怎么触发效果呢？

在下图中，我们可以看到用vm.$data改变data里面的数据时，会自动执行beforeUpdate函数，而且是在页面渲染之前触发的。

@(A0~Q0Y6Y49IG1$K92E6TF.png

updated：当data中的数据发生变化，同时页面完成更新后，会自动执行的函数

在beforeUpdate的代码基础上，我们加上updated函数

updated(){
    console.log('updated函数')
},
复制代码

$Y58L`P7`LB@Z0~MO{HGZ_F4.png$

此时打开浏览器更新的时候，发现并没有很直观的感受，那么我们就对这两个函数做一个对比看看。

beforeUpdate和updated对比

我们像上面对比beforeMount和mounted函数时一样，将root标签里面的innerHTML打印出来看看

beforeUpdate(){
    console.log(document.getElementById('root').innerHTML, 'beforeUpdate函数')
},
updated(){
    console.log(document.getElementById('root').innerHTML, 'updated函数')
},
复制代码

I4RA)1Y(7)UHU5R8]H~`0HF.png

根据浏览器中的输出内容可以看出，在beforeUpdate函数执行的时候，还未更新data中的数据，所以打印出来的还是之前的innerHTML内容；但是当更新完成之后，就会在updated函数中打印出新的innerHTML内容了。

把上面的生命周期函数搞懂之后，接下来就是最后两个生命周期函数了。

当vue实例创建完成之后，页面也会挂载到id=root的节点上，但是当我们不想要挂载了，想要把vue实例给销毁掉，那我们应该怎么操作呢？

上面生命周期的图示中已经给到答案了，就是用app.unmount函数可以模拟操作销毁vue实例

LNJ7YVL_GILJ)G74UNMJW`8.png

当执行app.unmount函数之后，页面上渲染的内容也被清空了，此时也就表示vue实例被销毁了。

beforeUnmount：当vue应用失效时，自动执行的函数

unmounted：当vue应用失效时，且DOM完全销毁之后，自动执行的函数

beforeUnmount(){
    console.log('beforeUnmount函数')
},
unmounted(){
    console.log('unmounted函数')
},
复制代码

SFYNSK(ER{PQ2(L5Y7VFA5I.png

beforeUnmount和unmounted对比

同样，我们可以在这两个函数里面打印innerHTML来看看最终的效果

beforeUnmount(){
    console.log(document.getElementById('root').innerHTML, 'beforeUnmount函数')
},
unmounted(){
    console.log(document.getElementById('root').innerHTML, 'unmounted函数')
},
复制代码

$LI}{L8WJXPNTUSWC]{Y6[_R.png$

在页面销毁之前，也就是beforeUnmount函数执行时，页面的内容还是不变的；当页面彻底销毁之后，unmounted函数打印出来的内容就没有vue实例里面的任何节点内容了。

总结

在本节内容中，我们主要学习了vue所有的生命周期函数：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted

但是生命周期这么多，该如何使用呢？在后面的文章中，会用各种案例带着大家对生命周期的使用有更多的了解。

【Vue3从零开始-第二章】2-2 生命周期函数

前言

什么是生命周期函数？

触发函数

生命周期详解

beforeMount和mounted对比

beforeUpdate和updated对比

beforeUnmount和unmounted对比

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【Vue3从零开始-第二章】2-2 生命周期函数

前言

什么是生命周期函数？

触发函数

生命周期详解

beforeMount和mounted对比

beforeUpdate和updated对比

beforeUnmount和unmounted对比

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景