Vue(三):Vue实例的生命周期

开局一张图,内容全靠扯。

1)beforeCreate
  实例创建之前,这个阶段的时候data和method都是拿不到的(通常在实例以外调用)。应用场景:可以加一些loading的效果,实例创建后移除

2)created
  实例创建之后,这个阶段就可以自由的操作数据了。但是dom节点啥的还没有加载好。应用场景:初始化数据,比如为组件中的下拉列表获取数据源。

3)beforeMount
  节点挂载前,此时组件应该是拿到了虚拟的节点,但是没有进行渲染。应用场景:获取节点的信息,然后改变,等待渲染

4)mounted
  节点渲染后,此时所有的节点信息被获取和渲染,可以操作节点了。
应用场景:移动某个节点,并给这个节点不停地变化颜色。是不是就成了美丽的跑马灯。

5)beforeUpdate
  数据更新前,它检测所有的数据更新。应用场景:对组件中所有的数据要求比较严格,更新前验证数据和合法性。

6)updated
  数据更新后,所有数据更新后会调用。应用场景:每个数据变化后都自动保存,或者保存用户的输入记录。

7)beforeDestroy
  实例销毁前,这个时候组件的所有东西还是完好的。应用场景:自定义检测用户有没有未保存的数据,提示用户是否继续销毁或者保存数据。

8)destroyed
  实例销毁后,此时组件包括其子组件已经完全销毁。应用场景:相当于组件已经死亡,但是下地府之前还能再许一个愿望。必须销毁一些业务逻辑上和自身有关联的组件,或者打开下一步逻辑需要的组件。
原文地址:https://www.cnblogs.com/liangshibo/p/12943371.html