一、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实例 / 组件 用于数据绑定、事件监听、DOM更新

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

（2）、减少重复
如果某个 DOM 操作你经常使用，就可以封装为指令

如果某种个 DOM 操作比较复杂，也可以封装为指令

---

二、Mixin 混入

混入其实就是复制

directives 的作用是减少 DOM 操作的重复
mixin 的作用是减少 data、methods、钩子的重复

mixin 可以选项合并，你也可以选择 Vue.mixin 把他放在全局中，但是不推荐因为这样范围太大会出bug。

例子

---

三、extends 继承（其实还是复制）

例子

通过该例与上文的 mixin 中的例子相对比，我们可以发现。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代共享信息