【vue】钩子函数和回调函数的区别

一般认为，钩子函数就是回调函数的一种，其实还是有差异的，差异地方就是：触发的时机不同。

先说钩子函数：

钩子（Hook）概念源于Windows的消息处理机制，通过设置钩子，应用程序对所有消息事件进行拦截，然后执行钩子函数。 

let btn = document.getElementById("btn");
btn.onclick = () => {
    console.log("i'm a hook");
}

上面的例子，在按钮点击时候立即执行钩子函数。而看下面的例子：

btn.addEventListener("click",() =>{
    console.log(this.onclick);//undefined
});

给btn绑定了一个监听器，只有消息捕获完成之后才能触发回调函数。

很明显的差别就是：钩子函数在捕获消息的第一时间就执行，而回调函数是捕获结束时，最后一个被执行的。

回调函数其实是调用者将回调函数的指针传递给了调用函数，当调用函数执行完毕后，通过函数指针来调用回调函数。而钩子函数在消息刚发出，没到达目的窗口前就先捕获了该消息，先得到控制权执行钩子函数，所以他可以加工改变该消息，当然也可以不作为，还可以强行结束该消息。