Vue生命周期详解(图解)

Bertha 。 2022-04-03 19:00 322阅读 0赞

[程序员学习必备书籍推荐：][Link 1]

首先我们对Vue生命周期官方给出的图进行详细解释

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Zlbmd5Q29kZXI_size_16_color_FFFFFF_t_70][] vue生命周期详细图解

什么是生命周期?
    简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程
    Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程
    生命周期方法?
    Vue从生到死的过程中伴随着各种各样的事件,这些事件会自动触发一些方法.这些方法我们统称为生命周期方法
    生命周期钩子 = 生命周期函数 = 生命周期事件
    
    创建期间生命周期方法
        beforeCreate:
        created:
        beforeMount
        mounted
    运行期间生命周期方法
        beforeUpdate
        updated
    销毁期间的生命周期方法
        beforeDestroy
        destroyed

代码解释:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue生命周期方法</title>
        
        <script src="js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <p>{
       {msg}}</p>
    </div>
    
    <script>
       
        let vm = new Vue({
            el:'#app',
            data:{
                msg:"IT程序员的日常"
            },
            methods:{
                say:function () {
                    console.log("IT程序员的日常");
                }
            },
            beforeCreate:function () {
                /*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
                //console.log(this.msg);
                //this.say();
                //console.log(this.say);
            },
            created:function () {
                /*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
                * 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
                */
                //console.log(this.msg);
                //this.say();
                // console.log(this.say);
            },
            beforeMount:function () {
                /*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
                // console.log(document.querySelector("p").innerText);
                // console.log(document.querySelector("p").innerHTML);
            },
            mounted:function () {
                /*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
                console.log(document.querySelector("p").innerText);
                console.log(document.querySelector("p").innerHTML);
            },
            beforeUpdate:function(){
                /*主要data中的数据发生了变化就会执行
                * 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
                *
                * */
                // console.log(this.msg);
                // console.log(document.querySelector("p").innerText);
                // console.log(document.querySelector("p").innerHTML);
            },
            updated:function () {
                /*主要data中的数据发生了变化就会执行
               * 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
               *
               * */
                console.log(this.msg);
                console.log(document.querySelector("p").innerText);
                console.log(document.querySelector("p").innerHTML);
            },
             beforeDestroy:function(){
                /*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
                * 最后能使用Vue实例的地址
                * */
            },
            destroyed:function () {
                /*
                * 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
                * */
            }
    
        })
    </script>
    </body>
    </html>

[Link 1]: https://gitee.com/black-programmer/Study_Book
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Zlbmd5Q29kZXI_size_16_color_FFFFFF_t_70]: /images/20220403/73d5f8014d314c0c868335c17991c2fd.png