详解Vue源码学习之callHook钩子函数

前端之家收集整理的这篇文章主要介绍了详解Vue源码学习之callHook钩子函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Vue实例在不同的生命周期阶段,都调用了callHook方法。比如在实例初始化(_init)的时候调用callHook(vm,'beforeCreate')和callHook(vm,'created')。

这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子。

再研究Vue官网的生命周期图示,是不是更容易理解了。

接下来我们来看一下Vue中实现钩子函数的源码:

举个例子说明:

实例化一个Vue组件test,给test定义了数据data,以及created方法。而在实例化组件的时候,Vue内部调用了callHook(vm,'created')(上文已说明)。执行callHook函数的时候,Vue在test组件的$options中查找created是否存在,如果存在的话就执行created相对应的方法。这里就会执行console.log("这里是Created")。

callHook的作用就是执行用户自定义钩子函数,并将钩子中this指向指为当前组件实例。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章