Vue 生命周期函数

Vue 生命周期函数

吐槽：最近学习 Vue 的生命周期函数，有点搞不懂，为什么要叫钩子函数？？？以前了解过 React 的生命周期，开始我已经 Vue 的生命周期理解起来应该和 React 类似，但是生命周期钩子函数是什么鬼，难道是和 Vue 其它地方环环相扣，有数据交互？

了解了之后发下，没有那么复杂，其实…就是和 React 生命周期类似，还是没有懂为什么要叫钩子函数？希望有大神可以答疑

什么鬼？

好了，不皮了，下面开始正式说 Vue 生命周期钩子函数

---

1. 生命周期方法详解

钩子函数	详情	场景	备注
beforeCreate	实例初始化之后，组件被创建时期，这个时候的 el，data，message 都是 underfined	可以加入 loading 事件；在服务器端的应用场景中，这个时候发送数据请求比较多一些
created	实例创建完成后，data、methods 被初始化	结束 loading 事件；推荐这个时候发送请求数据，尤其是返回的数据与绑定事件有关时
beforeMount	挂载初始之前，完成 el 初始化，render 被初次调用	也可以发送数据请求	在服务器端渲染期间不会被调用
mounted	完成挂载	获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求	在服务器端渲染期间不会被调用
beofreUpdate	挂载开始之前调用	挂载完成之前访问现有 DOM ，比如手动移除已添加的事件监听器；也可以进一步修改数据	在服务器渲染期间不会被调用，只有初次渲染会在服务端调用
updated	由于数据更改，重新渲染界面时调用	可执行依赖于 DOM 的操作	服务器端渲染期间不会被调用
activated	keep-alive 组件激活时调用		服务器端渲染期间不会被调用
deactivated	组件停用时调用		服务器端渲染期间不会被调用
beforeDestroy	实例销毁之前调用	删除钱发出确认信息；清理定时器	服务器端渲染期间不会被调用
destroyed	实例销毁后调有。调用后，所有东西都会被解绑，所有的事件监听器会被移动，子实例也会被销毁	提示已删除	服务器端渲染期间不会被调用
errorCaptured	当捕获一个来自子孙组件的错误时被调用。收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。可返回 false 以阻止该错误继续向上传播。	修改组件状态	2.5.0新增

---

2. 日常举栗子：

    
    
    




    
{{ message }}
    change
    destroy

2.1直接加载页面，页面显示：

初始化

控制台：

初始化

2.2 点击 change 按钮，页面：

change

控制台：

change

2.3 点击 destroy ，页面：

destory

控制台：

destory

之后，再点击 change 按钮，页面与控制台都不会再发生变化。

---

最后用官网的一张图压轴，如果有不对的地方，欢迎指正