vue父子组件生命周期执行顺序

生命周期：

一个组件从创建到销毁的整个过程就是生命周期。

生命周期函数（钩子函数）：

vue框架内置函数，随着组建的生命周期，自动按次序执行。

beforeCreate:创建实例之前执行，元素和数据都是undefined。

created:实例初始化完成后执行，可以访问数据或方法，不能操作DOM。可以做一些初始数据的获取，发送ajax。

beforeMount:挂载前执行，虚拟DOM创建完成，即将开始渲染。

Mounted:页面渲染完成后执行，可以对DOM进行操作。

beforeUpdate：数据发生更新时执行。此时vue实例中的数据是最新的，但是页面数据仍是旧值。

updated：数据发生更新导致的 DOM 重新渲染完成时执行。

beforeDestroy：实例销毁前执行。实例仍然可以使用，一般在这个时候清除定时器或者解除事件绑定等。

destroyed：实例销毁完成。

注意：在使用keep-alive组件后，会多出生命周期，即activated激活状态，deactivated失活状态。

四个阶段八个函数：

初始阶段 => 创建组件 => beforeCreate created

挂载阶段 => 渲染显示组件 => beforeMount mounted

更新阶段 => 修改了数据 => beforeUpdate updated

销毁阶段 => 删除组件对象 => beforeDestory destoryed

分析：

1.初始、挂载阶段

父组件beforeCreate => 父组件created => 父组件beforeMount => 子组件beforeCreate => 子组件created => 子组件beforeMount => 子组件mounted => 父组件mounted

2.更新阶段

父组件beforeUpdate => 子组件beforeUpdate => 子组件updated => 父组件updated

3.销毁阶段

父组件beforeDestroy => 子组件beforeDestroy => 子组件destroyed => 父组件destroyed

vue父子组件生命周期执行顺序相关推荐

vue父子组件生命周期执行顺序_关于Vue组件的生命周期及执行顺序
本文主要讲述了:Vue组件渲染时的生命周期及执行顺序 Vue组件数据变更时的生命周期及执行顺序 Vue组件嵌套时的生命周期及执行顺序正文组件渲染时的生命周期在组件渲染时,每个Vue组件都有4个生 ...
vue父子组件生命周期顺序_vue父子组件生命周期执行顺序
Parent -- Child1 -- Child2 装载 parent beforeCreate parent created parent beforeMount child1 beforeCre ...
Vue父子组件生命周期触发顺序
父子组件钩子函数执行顺序父 beforeCreate 父 created 父 beforeMount 子 beforeCreate 子 created 子 beforeMount 子 mounted ...
Vue父子组件生命周期
Vue父子组件生命周期 Vue实例需要经过创建.初始化数据.编译模板.挂载DOM.渲染.更新.渲染.卸载等一系列过程,这个过程就是Vue的生命周期,Vue中提供的钩子函数有beforeCreate.c ...
Vue父子组件生命周期的执行顺序
加载渲染过程父组件先创建,然后子组件创建:子组件先挂载,然后父组件再挂载即生命周期如下父beforeCreate 父created 父beforeMount 子beforeCreate 子cre ...
Vue父子组件生命周期的先后顺序
初次渲染完成触发的声明周期 beforeCreate() ,created() beforeMount(),mounted() 组件的调用顺序是先父后子,渲染完成的顺序是先子后父.组件的销毁操作是先父 ...
父子组件的生命周期执行顺序
父子组件的生命周期执行顺序 1.父子组件的生命周期运行顺序根据在其对应的钩子函数中的打印日志可得到如下顺序: 父beforeCreate-> 父create -> 子beforeCreat ...
Vue父子组件及mixins生命周期执行顺序
图为Vue生命周期生命周期分别为 1. 创建前后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象Data都为undefined,还未初始化.created阶段,vue实例的 ...
React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

vue父子组件生命周期执行顺序

vue父子组件生命周期执行顺序相关推荐

最新文章

热门文章