组件库源码中这些写法你掌握了吗？

❝

前沿：这几年，前端的组件库的演变迅速，社区脱颖而出不少优秀的开源组件库，包括element-ui、Ant design、IView等等，这些开源组件库源码中其实有很多值得我们学习的地方，无论是设计思路，代码风格等等，可以通过参考源码中一些写法，引用到我们平时的项目中去。

❞

1.Directives (指令)

❝

在vue中我们可以通过自定义指令，来对DOM元素进行底层操作，我们顺便复习下如何自定义一个指令，主要包含5个钩子函数，这里只列出几个比较常用的钩子函数，最后再介绍组件库常见的一些自定义指令

❞

Vue.directive("directiveName", {
  bind: function(el, binding, vnode){
   # 当指令第一次绑定元素el时触发，常用来做初始化
  },
  update: function(el, binding, vnode) {
   # 绑定Vue编译生成的虚拟节点VNode 更新时调用
  },
  unbind: function(el, binding, vnode) {
   # 解绑操作，用来将指令和元素解绑时调用，类似vue生命周期中的beforeDestroy钩子函数
  }
});

1.1 v-clickoutside

❝

v-clickoutside是Element-ui实现的一个自定义指令，目的是用来处理点击元素外面才会触发的事件，常用来处理下拉菜单等展开内容的关闭，在Element-ui的Select选择器、Dropdown下拉菜单、Popover 弹出框等组件中都用到了该指令

❞

• element的实现

❝

element的 clickoutside 的具体实现，如下