媒介

从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