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