Vue.js源码分析之自定义指令详解

前言

除了核心功能默认内置的指令 (v-model 和 v-show)，vue 也允许注册自定义指令。

官网介绍的比较抽象，显得很高大上，我个人对自定义指令的理解是:当自定义指令作用在一些dom元素或组件上时，该元素在初次渲染、插入到父节点、更新、解绑时可以执行一些特定的操作(钩子函数()

自定义指令有两种注册方式，一种是全局注册，使用vue.directive(指令名，配置参数)注册，注册之后所有的vue实例都可以使用，另一种是局部注册，在创建vue实例时通过directives属性创建局部指令，局部自定义指令只能在当前vue实例内使用

自定义指令可以绑定如下钩子函数:

·bind 　　　　 ;只调用一次，元素渲染成dom节点后，执行directives模块的初始化工作时调用，在这里可以进行一次性的初始化设置。
·inserted 　　　 　 ;被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
·update 　　　　　 ;所在组件的 vnode 更新时调用，但是可能发生在其子 vnode 更新之前。指令的值可能发生了改变，也可能没有。
·componentupdated ;指令所在组件的 vnode 及其子 vnode 全部更新后调用。
·unbind 　　　　　 ;只调用一次，指令与元素解绑时调用。

每个钩子函数可以有四个参数，分别是el(对应的dom节点引用)、binding(一些关于指令的扩展信息，是个对象)、vnode(该节点对应的虚拟vn哦的)和oldvnode(之前的vnode,仅在update和componentupdated钩子中可用)

bind钩子函数执行的时候该dom元素被渲染出来了，但是并没有插入到父元素中，例如:

输出如下:

可以看到input元素自动获得焦点了，控制台输出如下:

可以看到对于bind()钩子来说，它的父节点是获取不到的，因为vue内部会在执行bind()钩子后才会将当前元素插入到父元素的子节点里

源码分析

在解析模板将dom转换成ast对象的时候会执行processattrs()函数，如下:

adddirective会给ast对象上增加一个directives属性保存指令信息，如下:

例子里的p元素执行到这里时对应的ast对象如下:

接下来在generate生成rendre函数的时候，会执行gendirectives()函数，将ast转换成一个render函数，如下:

最后等渲染完成后会执行directives模块的create钩子函数,如下:

_updat 就是处理指令初始化和更新的，如下:

writer by:大沙漠 qq:22969969

对于bind钩子函数来说是直接执行了，而对于inserted钩子函数则是把函数保存到dirswithinsert数组里，再定义了一个callinsert函数，该函数内部通过作用域访问dirswithinsert变量，并遍历该变量依次执行每个inserted钩子函数

mergevnodehook()钩子函数的作用是把insert作为一个hooks属性保存到对应的vnode的data上面，当该vnode插入到父节点后会调用该hooks，如下:

createfninvoker就是v-on指令对应的那个函数，用到了同一个api，执行完后，我们就把invoker插入到input对应的vnode.data.hook里了，如下:

最后等到该vnode插入到父节点后就会执行invokecreatehooks()函数，该函数会遍历vnode.hook.insert，依次执行每个函数，也就执行到我们自定义定义的inserted钩子函数了。

总结

到此这篇关于vue.js源码分析之自定义指令的文章就介绍到这了,更多相关vue.js自定义指令内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！