前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Vue生命周期(11个钩子函数)「建议收藏」

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

作者头像
全栈程序员站长
发布2022-07-22 19:14:10
发布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实例,不再具有双向数据绑定的特点]

代码语言:javascript
代码运行次数:0
运行
复制
<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异步渲染

代码语言:javascript
代码运行次数:0
运行
复制
<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(“子组件报错”) },

代码语言:javascript
代码运行次数:0
运行
复制
<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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vue生命周期
    • 生命周期初识
    • 生命周期详解(八个钩子函数)
    • Vue的DOM异步渲染
    • 生命周期(其他三个钩子函数)
      • component 和keep-alive
      • 三个钩子函数详解
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档