生命周期钩子

最新推荐文章于 2024-04-10 18:01:45 发布

斗帝萧炎

最新推荐文章于 2024-04-10 18:01:45 发布

阅读量105

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53716634/article/details/128062208

版权

什么是生命周期？

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

什么是钩子函数？

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

图解：

含义：

创建前/后：在beforeCreated阶段，vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

三个钩子函数详解

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

<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>