vue生命周期

581 阅读2分钟

什么是vue生命周期?

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程,我们称这是 Vue 的生命周期。

vue生命周期的作用是什么?

Vue 所有的功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
生命周期中有多个事件钩子,在控制整个vue实例的过程时更容易形成好的逻辑。

第一次页面加载会触发哪几个钩子?

beforeCreate , created , beforeMount ,mounted 这几个钩子

简述每个周期具体适合哪些场景?

。。。

父子组件的生命周期

  • 执行顺序:

  • 父组件开始执行到beforeMount 然后开始子组件执行,最后是父组件mounted。

  • 如果有兄弟组件,父组件开始执行到beforeMount,然后兄弟组件依次执行到beforeMount,然后按照顺序执行mounted,最后执行父组件的mounted。

  • 当子组件挂载完成后,父组件才会挂载。

  • 当子组件完成挂在后,父组件会主动执行一次beforeUpdated/updated钩子函数(仅首次)

  • 父子组件在data变化中是分别监控的,但是更新props中的数据是关联的。

  • 销毁父组件时,先将子组件销毁后才会销毁父组件。

  • 兄弟组件的初始化(mounted之前)是分开进行,挂载是从上到下依次进行

  • 当没有数据关联时,兄弟组件之间的更新和销毁是互不关联的

DOM 渲染在哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

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

翻看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的生命周期