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