vue生命周期

解析vue生命周期

  • Vue生命周期简介
    Vue实例从创建到销毁的过程,就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
    在这里插入图片描述
  • 钩子函数(Hook)
    钩子是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息;钩子机制允许应用程序截获处理window消息或特定事件,钩子函数可以理解为js运行进程中在其特定段时的回调函数
  • 生命周期的钩子 (lifecyclehook)
    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同。在这里插入图片描述
<div class="app">
        <input type="button" value="修改" @click="msg='难受'">
        <p class="h3">{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '.app',
            data: {
                msg: "好嗨"
            },
            methods: {
                show() {
                    console.log('执行了show方法')
                }
            },
            beforeCreate() { //这里是第一个生命周期函数,表示实例被完全创建出来之前会执行它
                console.log(this.msg)      //undefined
                this.show() //      报错this.show is not a function
                    //注意  在beforeCreate生命周期函数执行的时候,data和methods中的数据都没有初始化


            },
            created() {
                console.log(this.msg)      //好嗨
                this.show()         //执行了show方法
                    //在created中,data和methods都已经被初始化
                    // 如果要调用methods中的方法,或者操作data中的数据,最早只能在created中操作

            },
            beforeMount() {
                //第三个生命周期函数,表示 模板已经在内存中编辑完成,但是尚未把模板渲染到页面上
                console.log(document.getElementsByClassName('h3')[0].innerHTML)       //{{msg}}
                    //在控制台输出的是{{msg}}
                    // 在beforeMount执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串

            },
            mounted() {
                // 第四个生命周期函数,表示内存中的模板,已经真实的挂载到了页面上,用户已经可以看到渲染好的页面
                console.log(document.getElementsByClassName('h3')[0].innerHTML)      //好嗨
                    //注意 mountend 是实例创建期间的最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好,此时,如果没有其他操作的话,这个实例,就静静的躺在我们的内存中。
            },



            //接下来是运行中的两个事件
            beforeUpdate() {
                //这时候,表示,我们的界面没有被更新,数据肯定被更新了


                console.log('界面上元素的内容:' + document.getElementsByClassName('h3')[0].innerHTML)     //好嗨

                console.log('data中的数据:' + this.msg)     //难受
                    //当执行beforeUpdate的时候,页面中的显示数据,还是旧的,data里的数据是最新的,页面尚未和data中的数据保存同步。

            },
            updated() {

                console.log('界面上元素的内容:' + document.getElementsByClassName('h3')[0].innerHTML)     //难受

                console.log('data中的数据:' + this.msg)      //难受
                    //updata事件执行的时候,页面和data数据已经保持同步了,都是最新的。
            }
        })
    </script>

created阶段的ajax请求与mounted请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态,此时如果做DOM请求时会报错,页面还没有渲染出来

mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick

beforeCreate,created,beforeMount,mounted 是自动被调用

beforeUpdate, updated,beforeDestroy,destroyed 是手动调用

子组件的created 优先于父组件的created 执行, 父组件的beforeCreate 优先于子组件的beforeCreate

子组件的mounted优先于父组件的mounted, 父组件的beforeMount 优先于子组件的 beforeMount
子组件的destroyed优先于父组件的beforeDestroy, 父组件的beforeDestroy 优先于子组件的 beforeDestroy

  • 还有 两个钩子函数表中没有
    activated: 在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用,该钩子在服务器端渲染期间不被调用。
    deactivated: keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万水千山走遍TML

您的鼓励,将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值