vue自定义指令升级2.0的坑

前言

从1.0.X版本就开始使用vue了，应该也是vue很早的一批用户。在我司使用vue这一年多以来（偏向移动端），我发现vue的插件真的是少之又少，这也是我当初一开始想写v-tap指令插件的初衷。

现在vue升级2.0后，在自定义指令部分的API所有变化了！对于一个插件做者来讲这简直是崩溃的！毫无兼容可言。本文我就讲介绍下一个自定义指令从1.0升级到2.0所走的坑。T.T

吐槽

咱们知道，一个方法最重要的就是传参，因此自定义指令最须要的也是这点。在实现过程当中，最大的变化就是这点。

// 1.0版本能实现如下API
v-tap="args($index,el,$event)"

// 而2.0版本后彻底不能，必须使用对象的形式，以下
v-tap="{ methods:args , index : index, item:item }"

简直了！彻底不知道做者为啥这样设计！（这太让我蛋碎了，若是你有更好的姿式，请尽快告诉我）

好吧，习惯了这样不优雅的画风以后其实仍是能够勉强适应的。

踩坑

一开始若是你直接实现一个指令不须要传参你会发现，vue的指令机制是直接取value得，因此你能够直接写v-directive="func"这样执行彻底没有问题，在你的自定义指令中只须要 binding.value.call便可

可是若是你写了 v-directive="func('aa')" 你将会发现，vue的指令机制把它解析成了expression，正如文档所说（大写懵逼）

expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

这又将致使了一个问题，在vue1.0中你能够写v-directive="a++" 这样能够直接使data里的变量a++，而在2.0中这会报错，应该都是解析成了expression的缘由

在我使用百般姿式后，最后不得不从了文档中的最后一种写法--对象字面量

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

那指令插件如何兼容1.0和2.0呢？我是这样处理的，分别写两个对象，判断版本不一样注册不一样指令

var vue1 = { ... };
var vue2 = { ... };

vueTap.install = function (Vue) {
    if(Vue.version.substr(0,1) > 1 ) {
        isVue2 = true;
    }
    
    Vue.directive('tap', isVue2 ? vue2 : vue1);
};

以上就是本次自定义指令升级的两个大坑！

vue自定义指令实现v-tap插件

github vue-tap

---

这个月的奶粉钱有没有，就看大家赞扬不啦了。

Have a nice day