Vue生命周期(11个钩子函数)「建议收藏」

全栈程序员站长

发布于 2022-07-22 19:14:10

5.7K10

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

Vue生命周期

生命周期初识

生命周期详解（八个钩子函数）

生命周期

生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

生命周期钩子函数

生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；生命周期的钩子函数中的this，会默认指向vue的实例;

钩子函数

beforeCreate created[可以获取数据及方法] beforeMount mounted[可以获取到真实的DOM] beforeUpdate updated[数据更新执行] beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]

<body>
    <div id="app">
        <div>
            { 
   { 
   msg}}
        </div>
        <ul>
            <li v-for="a in arr"></li>
        </ul>
        <button @click="fn">点我一下</button>
    </div>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // 生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；
      在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，
在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

        // 生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；
        //生命周期的钩子函数中的this，会默认指向vue的实例
        // beforeCreate created 
        // beforeMount mounted
        // beforeUpdate updated
        // beforeDestroy destroyed
        // function Vue(options){ 
   
        // let a = document.querySelector(options.el);
        // for(let key in options.data){ 
   
        // Object.defineProperty(options.data,key,{ 
   
        // get(){ 
   

        // },
        // set(){ 
   

        // }
        // })
        // }
        // }
        // new Vue({el:"#app",data:{}})


        let vm = new Vue({ 
   
            data: { 
   
                msg: "hello",
                arr: [1, 2, 3, 4]
            },
            // 1. 在这个钩子函数执行之前初始化事件以及生命周期
            beforeCreate() { 
   
                // 1. 在这个钩子函数中，不能获取data中的数据
                // console.log(this.msg);
                // 2. 这个函数不能操作DOM；
                // console.log(document.getElementsByTagName("li"))
            },
            // 给Vue的实例注入数据，进行数据监听
            created() { 
   
                // 在created发送请求
                // 1. 可以获取到data中的数据
                // 2. 不能操作DOM的
                //console.log(this.msg);
                // console.log(document.getElementsByTagName("li"))

                axios.get("./carts.json").then(data => { 
   
                    // 异步的；
                    this.arr = data.data;
                    console.log(2);

                })
            },
            methods: { 
   
                getData() { 
   

                },
                fn() { 
   
                    this.msg = "world"
                }
            },
            // 执行之前，判断是否有el,template;编译
            beforeMount() { 
   
                // console.log(document.getElementsByTagName("li"))
            },
            // 挂载完毕
            mounted() { 
   
                // debugger
                // 挂载： 把VUE实例生成的虚拟的DOM转成真实的DOM，放在了页面中，这就是挂载；
                // 编译出的DOM把原有的DOM替换完毕；
                // 可以获取最终的DOM元素
                // let d = {type:"div",a:"1",chidlren:[{type:"span",children:[]}]}
                console.log(document.getElementsByTagName("li"));
                //console.log("mounted","初始化");
            },
            // 当数据更新时，会调用beforeUpdate 和updated钩子函数；上面四个不再运行
            beforeUpdate() { 
   
                console.log("beforeUpdate", "更新之前");
                console.log(this.msg)
                // 更新数据之前执行
            },
            updated() { 
   
                console.log("beforeUpdate", "更新之后");
                // 数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数
            },
            // 销毁之前
            beforeDestroy() { 
   
                // 销毁之前
                // 清除定时器
                console.log("beforeDestroy");

            },
            // 销毁之后
            destroyed() { 
   
                console.log("destroyed");
                // 销毁子组件，销毁观察者，事件监听者
                // 元素的事件还在，但是更改数据不会再让视图进行更新了；
            }
        }).$mount("#app");
        // vm.$destroy();
        // console.log(vm);
        // 在项目中，你遇到过什么问题，怎么解决的？
        // 准备
    </script>
</body>

</html>

Vue的DOM异步渲染

<body>
    <div id="app">
        <ul>
            <li v-for="a in arr">{ 
   { 
   a}}</li>
        </ul>
        { 
   { 
   sum}}
    </div>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({ 
   
            data:{ 
   
                 arr:[1,2,3]
            },
            created(){ 
   
                // 此时并没有编译模板
// 如果在created改变数据，那么编译进行一次；如果在mounted中改数据，会再次编译模板；
                console.log(100);
            },
            beforeMount(){ 
    
                console.log(200);
//this.arr=[1,2,3,4];// 开始编译模板编译原有数据编译3个li,存在内存中，
当数据更新时，立即将内存中的模板编译成4li;最后挂载到真实的DOM上；不会引发beforeUpdate函数的调用
            },
            computed:{ 
   
                sum(){ 
   
                    // 在挂载的过程中,执行的这个函数
                    console.log(1);
                    return 100;
                }
            },
            // 编译模板
            // 在mounted之前改数据，不会调用beforeUpdate这个函数；
            // DOM 已经挂载完毕
            mounted(){ 
   
                console.log(300);
                this.arr=[1,2,3,4];
// 开始编译模板编译原有数据编译3个li,存在内存中，并且直接挂载到了真实DOM中，当数据更新时，
立即将内存中的模板编译成4li;再次把最新挂载到真实的DOM上；会引发beforeUpdate函数的调用
// VUE中DOM的更新是异步的；
// 如何在mounted中操作最新的DOM呢？
// $nextTick需要传入一个回调函数，会当真实的DOM再次更新完成，会立即调用这个回调函数；
                this.$nextTick(()=>{ 
   
                    let oLis = document.getElementsByTagName("li")
                    console.log(oLis.length);
                });
            },
            beforeUpdate(){ 
   
                console.log("beforeUpdate");
            }
        }).$mount("#app");
    </script>
</body>
</html>

生命周期（其他三个钩子函数）

component 和keep-alive

component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件；
- 闭合标签使用组件

component : 内置组件，根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致；然后可以显示对应的组件

component: 每次能动态显示一个组件，当切换下一个组件时，当前组件要销毁 <component is=“second”>

keep-alive : keep: 保持 alive:活力

VUE项目的优化： keep-alive

keep-alive : keep: 保持 alive:活力 <keep-alive> keep-alive:用于缓存组件，如果该组件还会再启用，那么可以使用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要销毁，也不需要再创建 <component v-bind:is=“one”> //如果是动态属性，那么会去data中取值 </keep-alive>

三个钩子函数详解

当keep-alive 缓存组件才会有的生命周期的钩子函数
- activated deactivated
errorCaptured 当子孙组件出错时，会调用这个钩子函数

// keep-alive 缓存组件生命周期的钩子函数 activated deactivated // 生命周期的钩子函数 activated() { // 当缓存组件有被显示出来时，会触发这个钩子函数 console.log(100); }, deactivated() { // 当缓存的组件隐藏时，会触发这个钩子函数； console.log(200); }, // 当子孙组件出错时，会调用这个钩子函数 errorCaptured(a, b, c) { // 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。 console.log(a); console.log(b); console.log©; console.log(“子组件报错”) },

<body>
    <div id="app">
        <button @click="fn">点一点</button>
        <!-- // component : 内置组件，根据is属性来显示对应的组件;
    is属性的属性值保持和组件名字一致；然后可以显示对应的组件
        // 如果是动态属性，那么会去data中取值 -->
        <!-- <component is="second"></component> -->
        <keep-alive>
            <!-- keep-alive:用于缓存组件，如果该组件还会再启用，
            那么可以使用keep-alive进行组件缓存和优化，提高性能，缓存的组件不需要销毁，
也不需要再创建 -->
            <component v-bind:is="one"></component>
        </keep-alive>

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件；
        // 闭合标签使用组件
        // component: 每次能动态显示一个组件，当切换下一个组件时，当前组件要销毁
        // keep-alive : keep: 保持 alive:活力 
        // VUE项目的优化： keep-alive
        let kkk = { 
   
            data() { 
   
                return { 
   
                    a: 'cc'
                }
            },
            template: "<div>{ 
   {a}}</div>"
        }
        let first = { 
   
            destroyed() { 
   
                console.log("销毁")
            },
            components: { 
   
                kkk
            },
            // keep-alive 缓存组件 生命周期的钩子函数 activated deactivated
            // 生命周期的钩子函数
            activated() { 
   
                // 当缓存组件有被显示出来时，会触发这个钩子函数
                console.log(100);
            },
            deactivated() { 
   
                // 当缓存的组件隐藏时，会触发这个钩子函数；
                console.log(200);
            },
            // 当子孙组件出错时，会调用这个钩子函数
            errorCaptured(a, b, c) { 
   
                // 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、
发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
                console.log(a);
                console.log(b);
                console.log(c);
                console.log("子组件报错")
            },
            template: "<div>我是老大<kkk></kkk></div>"
        };
        let second = { 
   
            template: "<div>我是老二</div>"
        }
        let third = { 
   
            template: "<div>我是老三</div>"
        }
        let vm = new Vue({ 
   
            el: "#app",
            data: { 
   
                one: "first"
            },
            methods: { 
   
                fn() { 
   
                    let ary = ["first", "second", "third"];
                    let index = ary.indexOf(this.one);
                    if (index < 2) { 
   
                        this.one = ary[index + 1];
                    } else { 
   
                        this.one = ary[0];
                    }
                    // 
                    // switch (this.one) { 
   
                    // case "first":
                    // this.one = "second"
                    // break;
                    // case "second":
                    // this.one = "third"
                    // break;
                    // default:
                    // this.one = "first"
                    // break;
                    // }
                }
            },
            components: { 
   
                first,
                second,
                third
            },

        });
    </script>
</body>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/125994.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月6，如有侵权请联系 cloudcommunity@tencent.com 删除

缓存