Directives

写法

声明一个全局指令

Vue.directive('x',directiveOptions)

示例代码：

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

然后借可以在其他地方使用 v-x

<img alt="Vue logo" v-x src="./assets/logo.png" width="25%">

声明一个局部的

在相应的组件里面写入，然后只能在当前组件里面引用。

<script>
export default {
  name: "HelloWorld",
  directives: {
    x: {
      inserted(el) {
        el.addEventListener("click", () => {
          console.log("x");
        });
      },
    },
  },
  props: {
    msg: String,
  },
};
</script>

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

小贴士：当我们写bind/inserted/update等，往往再加一个unbind 来解绑。

指令的作用

主要用于DOM操作

Vue实例/组件用于数据绑定、事件监听、DOM更新
Vue指令主要目的就是原生DOM操作

减少重复

如果某个DOM操作你经常使用，就可以封装为指令
如果某个DOM操作比较复杂，也可以封装为指令

mixins(混入)

官方文档

mixins的作用是减少data、 methods、钩子的重复

代码示例：点击这里

extends(继承)

减少重复

和上面的minxins是一样的，它可能将Vue.vue也会认为是一个需要继承的文件。

最好就是多用minins,如果在一模块里面使用了太多的minins就可以考虑extends一次复制和继承。

案例示例：点击这里

provide(提供) 和 inject(注入)

祖先提供后代使用。

 // 祖先提供
 provide() {
    return {
      themeName: this.themeName,
      fontSizeNmae: this.fontSizeName,
      changeTheme: this.changeTheme, // 如果不生效，刷新一下 codesandbox
      changeFontSize: this.changeFontSize
    };
  }

// 后代注入
<script>
export default {
  inject: ["themeName", "changeTheme", "changeFontSize"]
};
</script>