💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
1.什么是vue生命周期? 答: Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。 2.vue生命周期的作用是什么? 答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 ![](https://img.kancloud.cn/52/bc/52bc617f313755802f803bd4d73cea53_1129x645.png) ## 1, 创建期间的生命周期函数 + beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性 + created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板($el属性还没有显示出来) ## 2, 加载期间的生命周期函数 + beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。 + mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示,==异步请求== 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。 ## 3, 运行期间的生命周期函数 + beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。 + updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了! 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。 ## 4, 销毁期间的生命周期函数 + beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。 + destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 ![](https://img.kancloud.cn/c1/5f/c15f0fd67c69a84ab3ea1292c336156e_617x484.png)