一、认识钩子函数
想学Vue吗？首先要知道啥是钩子函数，它在控制组件方面超给力！Vue里面的钩子函数分两种：一种像定时小闹钟，到了时间就响起来；另一种就是你自己动手触发的那种。学会了这些，轻松搞定Vue项目不再难！
二、生命周期钩子函数
你听过吗？Vue里有八个叫“生命周期”的东东，还有一大把”钩子函数”给咱们引路！比如beforeCreate，就像是盖房子时的第一道工序；created搞定了基建，接下来就等装修啦；beforeMount，和装墙板差不多；mounted就像是房子装修完毕；beforeUpdate就像提前预热，准备更新数据了；updated就像房子焕然一新，可以入住了；beforeDestroy就像是打包好行李，准备搬家；而final的destroyed，就像是人离开后，房子也消失了。了解了这些阶段和对应的钩子函数，我们就能更清楚地知道Vue实例在各个阶段是怎么回事儿，还能根据需求来使用它们。
1.beforeCreate
你要是想玩组件，首先得启动这个叫’beforeCreate’的程序。它能帮你弄出个小白，就像张白纸一样，啥都没，等你自由发挥。不过记得，千万别乱碰数据和DOM元素，这些可都是严格限制不许碰的。这个方法就是专门为你设计的，可以放心地设定数据、设全局变量等等。
2.created
选好了就行，不用等组件正式上架。现在你可能看不见什么，别担心，瞅瞅设置跟数据，顺道儿搞懂初始化和同步加载怎么回事儿。
3.beforeMount
记住`beforeMount`这玩意儿是在我们的组件摸到DOM前就开始干活的虽然你的组件已经弄好了，但是网页上可能还没出现！赶紧去改改模板！
4.mounted
别急，Mounted这个小辅助工具就够了，往它身上一贴，啥麻烦事都让它给你摆平了！改改DOM结构或者用别的库来启动都没问题！
5.beforeUpdate
记住，在变更新数据之前必先添加个beforeUpdate钩子。这个时候组件还在加载，正好利用这段时间来处理其他事情，不怕出什么岔子了。
6.updated
新版本的勾子只要数据有变化就会发声，可能这些组件早就华丽升级了！如果还能看到DOM元素的话，赶快搞定DOM方面的事情！
7.beforeDestroy
知道onBeforeDestroy不？这就是在组件关闭前做点小动作哒。这时候还是可以随便搞搞组件的，删掉没用的东西，停下计时器之类，想怎么样都行！
8.destroyed
当组件老了要光荣退休时，“destroyed”这个钩子就来告诉你：这东西不行！别再去碰它或是任何跟它相关的事情和监测了。这个钩子还会留出点时间给你清理残渣，做个大扫除。
三、自定义事件钩子函数
Vue除了那个神奇的钩子操作，还能让你随心所欲地设计事件！用$on()来监控，然后$().emit()一发，页面交互就这么轻松搞定。想传个信儿、整点儿花样都不是事儿
学学vue文档里的hook函数，摸清了它们，就能明白vue实例咋运作。而且，想怎么改变程序都行。只要掌握这几招hook函数，代码质量和速度肯定有大幅提高，尤其是在做大型项目时，效果特棒！
四、总结与展望
搞清楚没，Vue文档里提到了”钩子函数”这个玩意儿，它分为两种类型。一种是跟着Vue实例生存周期走的，另一种就是我们可以自由安排的定制事件。那么什么是钩子函数？简单来说，就是在Vue创造出实例之后，会根据固定的顺序去找你事先写好的那些钩子函数。只要搞清楚这些阶段和钩子函数，就能了解到Vue运行过程中一些现象背后的真相了。而且，有时候还能用它们来解决实际问题！
你知道Vue有啥隐藏功能吗？比如说它的生命周期和自定义事件，还有函数挂载那些复杂的玩意儿。你是否也曾被它们搞得晕头转向？快来分享一下你是如何弄清楚的！
评论0