Vue生命周期

生命周期 vue实例从创建到销毁的过程

钩子函数 事件劫持机制 VUE内置事件

 

1.0vue生命周期:
    钩子函数:

    created    ->   实例已经创建    √
    beforeCompile    ->   编译之前
    compiled    ->   编译之后
    ready        ->   插入到文档中    √

    beforeDestroy    ->   销毁之前
    destroyed    ->   销毁之后

 

2.0生命周期

组件相关钩子函数：

beforeCreate：

组件实例刚刚创建，还未进行数据观测和事件配置（创建前状态 el和data并未初始化）

this指向创建的实例
数据观测（data observer）和event/watcher配置尚未完成
不能访问到methods、data、computed、watch上的方法和数据

created：

实例已经创建完成，并且已经进行数据观测和事件配置（完成了data数据的初始化，el没有）

实例创建完成，并已经完成以下配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调
此时可以调用methods中定义的方法，修改data的数据，并且可触发响应式变化、computed值重新计算，watch到变更等

还未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组

此阶段为"实例初始化"后 创建完毕，能读取到数据data的值，"DOM"还未生成所以属性el还不存在。

beforeMount：

模板编译之前，还没挂载（挂载前状态，完成了el和data初始化）

在挂载开始之前被调用/此时已经成功关联到指定的dom元素,但是{{}}数据还未成功渲染成data里面的数据。

mounted：

模板编译之后，已经挂载，此时才会有渲染页面，才能看到页面上数据的显示（挂载结束状态，完成挂载）

数据已成功渲染成data内的值。

beforeUpdate：

组件更新之前（更新前状态）

修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。

这里的更新对象是模板，即需要虚拟 DOM 重新渲染和打补丁，beforeUpdate发生在以上两个流程之前，此时新的虚拟DOM已经生成

updated：

组件更新之后（更新完成状态）

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，可以执行依赖于 DOM 的操作

beforeDestroy：

 

实例销毁之前调用。在这一步，实例仍然完全可用，this仍能获取到实例一般在这一步中进行：销毁定时器、解绑全局事件、销毁插件对象等操作

destoryed：

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁