一、Direvtives 指令

比如我們很熟悉的：
v-if 、 v-for、 v-show、 v-html 等

1、兩種寫法

（1）聲明一個全局指令
Vue.direvtives('x',directiveOptions)
你就可以在任何組件里使用 v-x 了。

如：

Vue.directive("y", {
  inserted(el) {
    el.addEventListener("click", () => {
      console.log("y");
    });
  }
});

（2）聲明一個局部指令（只能在聲明的組件里使用）

如：

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  directives: {
    y: {
      inserted(el) {
        el.addEventListener("click", () => {
          console.log("xxx");
        });
      },
    },
  },
  components: {
    HelloWorld,
  },
};
</script>

2、directiveOptions

（1）、五個函數屬性

詳情見文檔

bind（el，info，vnode，oldVnode） - 類似 created

inserted（參數同上） - 類似 mounted

update（參數同上） - 類似 update

componentUpdated（參數同上） - 用的不多 請看文檔

unbind（參數同上） - 類似 destroyed

（2）、舉例

new Vue({
  directives: {
    on2: {
      // bind 可以改為 inserted
      bind(el, info) {
        el.addEventListener(info.arg, info.value);
        // Vue 自帶的 v-on 并不是這樣實現的，它更復雜，用了事件委托
      },
      unbind(el, info) {
        el.removeEventListener(info.arg, info.value);
        //清理元素消失后，變成無意義的代碼
      }
    }
  },

（3）、縮寫

請查詢文檔

不推薦縮寫原因：不方便清理“垃圾”(就是上文無意義的代碼)

3、指令的作用

（1）、主要用于 DOM 操作
Vue實例 / 組件 用于數據綁定、事件監(jiān)聽、DOM更新

Vue指令主要目的就是原生 DOM 操作

（2）、減少重復
如果某個 DOM 操作你經常使用，就可以封裝為指令

如果某種個 DOM 操作比較復雜，也可以封裝為指令

二、Mixin 混入

混入其實就是復制

directives 的作用是減少 DOM 操作的重復
mixin 的作用是減少 data、methods、鉤子的重復

mixin 可以選項合并，你也可以選擇 Vue.mixin 把他放在全局中，但是不推薦因為這樣范圍太大會出bug。

例子

三、extends 繼承（其實還是復制）

例子

通過該例與上文的 mixin 中的例子相對比，我們可以發(fā)現。extend 是比 mixins 更抽象一點封裝。（如果你嫌寫多次 mixins 麻煩，可以考慮extends 一次。不過實際寫代碼里當中用得比較少）

四、provide 和 inject 提供和注入

例子

總結：

作用：大范圍的 data 和 method 等共用
注意：不能只傳 themeName 不傳 changeTheme，因為 themeName 的值是被復制給 provide 的
（可以傳引用，但是不推薦，因為容易失控導致BUG）

五、總結

1、directives 指令
全局用 Vue.directive('x',{...})
局部用 options.directives
作用是減少 DOM 操作相關重復代碼

2、mixins 混入
全局用 Vue.mixin({...})
局部用 options.mixins:[mixin1,mixin2]
作用是減少 options 里的重復

3、extends 繼承/擴展
全局用 Vue.extend({...})
局部用 options.extends:{...}
作用跟 mixins 差不多，只是形式不同

4、provide 和 inject 提供和注入
祖先提供東西，后代注入東西
作用是大范圍，隔N代共享信息