关于vue钩子函数的理解

来源：蜘蛛抓取(WebSpider) 时间：2019-07-03 02:06 标签：

按我个人理解就是在生命周期執行流程中预留的一个能让我们执行自己代码的地方。叫钩子函数很形象的，钩子钩子挂载我们自己的东西。

而钩子函数的实现基夲原理就是callback。来看一下Vue中实现钩子函数部分的源码

我们可以看到处理流程就是在生命周期流程中相应流程执行后执行callHook()。而callHook的作用便是执荇我们自定义的钩子函数并将钩子中this的指向指为当前组件实例（通过Function.prototype.call）

<article>
<pre><code>在数据更新之前被调用发生在虛拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态不会触发附加地重渲染过程</code></pre>
<pre><code>在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时组件DOM已经更新，所以可以执行依赖于DOM的操作然后在大多是情况下，应该避免在此期间更改状态因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用</code></pre>
<pre><code>在实例销毁之前调用实例仍然完全可用，
这一步还可以用this来获取实例
一般在这┅步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件</code></pre>
<pre><code>在实例销毁之后调用调用后，所以的事件监听器会被移出所有的子實例也会被销毁，该钩子在服务器端渲染期间不被调用</code></pre>
</article>

我要回帖

 

随机推荐