谈谈vue生命周期-看了这篇你就懂了

写这章博客不是为了要获得多少赞,主要是利用vue开发项目时踩的坑太多了。自己曾不理解或者遇到的问题再这里搞清楚,不想后来的人再遇到这样的坑,做技术的要懂得分享,做人嘛,最重要的是开心。

vue官网说,“你暂时不用搞清楚这些...",我觉得你既然准备用vue做开发的,不搞懂搞透它,你以后会发现踩的坑终究还是有它引起的,等以后再来补坑,不如现在就拿下它。

以下主要从几个方面来讲:

1.vue的生命周期是什么

2.vue生命周期的在项目中的执行顺序

3.vue中内置的方法 属性和vue生命周期的运行顺序(methods、computed、data、watch)

4.自己构造的方法与vue生命周期的运行顺序 如show这些

5.总结

一、vue的生命周期是什么

    vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。在组件中具体的方法有:

    beforeCreate

    created

    beforeMount

    mounted

    (

        beforeUpdate

        updated

    )

    beforeDestroy

    destroyed

    对应的中文就如其字面意思,英文不好的童鞋可以有道翻翻

    好了,这里要上图啦~~~

 

二、vue生命周期的在项目中的执行顺序

...

data () {

    return {

    rendered: false,

}

}

...

1.beforeCeate(){

    console.log(this.rendered);    // undefined  

 

}

2.created() {

    console.log(this.$el);//undefined

    console.log(this.rendered);  // false

}

 

3.beforeMount() {

    console.log(this.$el);//undefined

}

 

4.mounted() {

    console.log(this.$el);

}

 

5.beforeDestroy(){

    console.log(this.$el);

    console.log(this.rendered); 

}

 

6.destroyed() {

    console.log(this.$el);

    console.log(this.rendered);

}

 

三、vue中内置的方法 属性和vue生命周期的运行顺序(methods、computed、data、watch、props)

    从第一二点可知道data的初始化是在created时已经完成数据观测(data observer),并且诸如methods、computed属性 props等已经初始化;那问题来了,

data props computed watch methods他们之间的生成顺序是什么呢?

根据翻看vue源码可知:

 

props => methods =>data => computed => watch; 懂了没 

四、自己构造的方法与vue生命周期的运行顺序 如show这些

    往往我们在开发项目时都经常用到 $refs 来直接访问子组件的方法,但是这样调用的时候可能会导致数据的延迟滞后的问题,则会出现bug。

解决方法则是推荐采取异步回调的方法,然后传参进去,严格遵守vue的生命周期就可以解决 推荐 es6 的promise。

示例代码:

handleAsync () {

    return new Promise(resolve=>{

       const res="";

        resolve(res)

})

}

...

async handleShow() {

    await this.handleAsync().then(res=>{

    this.$refs.child.show(res);

})

}

...

五、总结

    vue 的生命周期,总得来说就是实例的创建和销毁这段时间的一个机制吧。也是vue框架的数据间的交互通信。其实现在看来也没那么难,但是vue的源码实现这一套机制那是难得一逼,涉及到复杂的算法如diff算法,有兴趣的童鞋可以去深入了解一下。

 

Vue 生命周期是指 Vue 实例从创建到销毁期间的各个阶段及其相应的钩子函数。Vue 生命周期的理解对于开发者来说非常重要,因为它能够帮助我们更好地理解 Vue 应用程序的运行机制,以及在不同的阶段执行不同的操作。 在日常使用场景中,我们可以结合以下几个阶段来理解 Vue 生命周期: 1. beforeCreate:在实例创建之前,该钩子函数会被调用。这是一个非常重要的阶段,因为在这个阶段中,我们可以为实例添加一些全局变量或者一些插件。 2. created:在实例创建之后,该钩子函数会被调用。在这个阶段中,我们可以进行一些初始化操作,比如发起 Ajax 请求,获取数据等等。 3. beforeMount:在挂载之前,该钩子函数会被调用。在这个阶段中,我们可以对模板进行一些修改,比如添加一些动态数据。 4. mounted:在挂载之后,该钩子函数会被调用。在这个阶段中,我们可以进行一些 DOM 操作,比如获取元素的位置、大小等。 5. beforeUpdate:在数据更新之前,该钩子函数会被调用。在这个阶段中,我们可以对数据进行一些处理,比如对比新旧值,判断是否需要更新等。 6. updated:在数据更新之后,该钩子函数会被调用。在这个阶段中,我们可以进行一些 DOM 操作,比如重新渲染模板、更新元素的属性等。 7. beforeDestroy:在实例销毁之前,该钩子函数会被调用。在这个阶段中,我们可以进行一些清理操作,比如清除定时器、取消订阅等。 8. destroyed:在实例销毁之后,该钩子函数会被调用。在这个阶段中,我们可以进行一些善后操作,比如释放内存等。 总的来说,Vue 生命周期的理解对于我们开发 Vue 应用程序非常重要。只有了解了 Vue 生命周期,我们才能更好地掌握 Vue 应用程序的运行机制,从而更加高效地开发出高质量的应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值