Vue生命周期

69 阅读2分钟

 对于使用Vue框架进行开发的用户来说,Vue的生命周期函数是一个非常重要的概念。理解好他,对于我们后续的开发以及debugger都会带来非常大的帮助。根据Vue官方的介绍,我们知道Vue一个有4个生命周期,8个钩子函数,具体的生命周期函数如Vue官网所示。

 对Vue的生命周期函数有了一定的了解后,接下来我们对生命周期的一些具体问题进行深入解析:

  • 问题一:组件实例在初始化过程中会经历哪些钩子函数?

答:对于一个组件,在进行初始化的过程中,会依次的执行beforeCreate->created->beforeMount->mounted四个周期函数,

当组件所template的data(该数据必须是响应式的)被改变后,会依次的执行beforeUpdate->updated两个周期函数

当组件被销毁后,会依次的执行beforeDestroy->destroyed

  • 问题二:在不同的钩子函数下,可以获取到哪些值?

答:在beforeCreate阶段,data和props里面的数据都是读不到的

在created以及后续阶段,data和props里面的数据是可以读到的

  • 问题三:props和data里面的数据,究竟是哪一个先加载到呢?

答:props里面的数据先于data加载,这样在data里面就可以读取到props里面的数据了。

  • 问题四:有哪些钩子函数的执行是先于组件dom渲染的?

答:在beforeCreate、created、beforeMount这三个阶段中,都是获取不到页面的dom元素,只有在mounted及其之后阶段才可以获取的到

  • 问题五:哪些操作会导致组件销毁的?

答:在进行路由跳转的情况下

在v-if判断语句的结果改变的情况下

在改变组件的key中