vue 生命周期

vue声明周期就是一个vue实例对象从创建到销毁的过程, 从创建vue , 初始化vue对象,初始化vue属性和方法 , 创建模板字符串 , 渲染页面 , 更新 , 销毁 这个过程

生命周期方法分为三大类

1.创建期间的生命周期方法

beforeCreate(创建前)

created(创建后)

beforeMount(挂载前)

mounted(挂载后)

2.运行期间的生命周期方法

beforeUpdate(更新前)

updated(更新后)

3.销毁时的生命周期方法

beforeDestroy(销毁前)

destroy(销毁后)

beforeCreate(创建前)

 beforeCreate调用时 vue实例刚被创建出来 此时还没有初始化好vue实例对象中的数据和方法所以此时还不能访问vue实例中保存的数据和方法

created(创建后)

此时created可以访问vue实例中保存的数据和方法 也是整个生命周期最早 能访问实例中数据和方法的地方  可以在created中进行数据的初始化   此时html还么有渲染所以不能对dom进行操作

深入了解可看

Vue进阶（三十六）：created() 详解_No Silver Bullet的博客-优快云博客_created()

beforeMount(挂载前)

调用beforeMount时只是在内存中编译好了最终的字符串模板 并未渲染到挂载目标中 不可以操作dom

mounted(挂载后)

 mounted函数调用时 表示vue已经完成了模板的渲染 我们可以在mounted中操作dom中的节点

图片截取来自

 vue生命周期（created，mounted具体用于哪些场景）、三种存储的区别_hangnan315的博客-优快云博客_created生命周期

beforeUpdate(更新前)

不是所有的数据更新都会调用这个函数只有在视图中显示的数据改变才会被调用 

 在模板中使用的数据改变时才会触发beforeUpdate

updated(更新后)

updated调用时数据和页面都已经更新好了

 updated中不要改变模板中响应数据的值 会陷入死循环

可以对页面进行监听 比如触底加载 

updated的使用场景案例

vue updated生命周期的使用场景，可以做什么_hanson247的博客-优快云博客_vueupdated生命周期什么时候

updated和watch的区别Vue进阶（八十三）： updated和watch的区别_No Silver Bullet的博客-优快云博客_vue的update和watch

 beforeDestroy(销毁前)

 beforeDestroy调用时当前组件即将被销毁 但是依然可以访问到组件的数据和方法  这是我们最后能访问到组件数据和方法的函数 

可以进行一些扫尾工作 比如解绑一些全局事件 如:onresize窗口变化事件 onscroll滚动事件 . 处理一些具有负面影响的代码，如定时器，事件监听等

destroy(销毁后)

 在destroyed中在操作实例中的数据和方法都是没有意义的

生成的dom都在 但是所有的vue的指令 监听 都没有了响应

可以看

vue 生命周期4 销毁流程 beforeDestroy destroyed_兜里揣着星星的博客-优快云博客_vue生命周期销毁

7.13(更新)

activated(组件激活时)

在挂载后和更新前被调用的。但如果该组件中没有使用缓存，也就是没有被<keep-alive>包裹的话，activated是不起作用的。和上面的beforeDestroy和destroyed用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用 beforeDestroy和destroyed的话，就太浪费性能了。实例被激活时使用，用于重复激活一个实例的时候

deactivated(组件未激活时)

 

 

errorCaptured(错误调用)

 

 

当捕获一个来自后代组件的错误时被调用