1.用directives创造自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
这里我们仿写一个v-on功能的指令
bind的第一个参数el为指令所绑定的元素，可以中hi接操作DOM，第二个参数info可以取到元素里的各个属性
这样，新的指令v-on2就创建成功了
该写法为声明一个局部指令的写法，另一种是声明一个全局指令的写法
Vue.directive('x', directiveOptions)
这样写的话就可以在任何组件里用v-x 了
指令的作用主要是用于DOM操作，虽然VUE有提供一些现成的指令，但是在开发的过程中难免会遇到操作DOM的需求，而此时如果VUE没有提供指令，就可以自己封装，在遇到某个DOM频繁操作时，也可以达到减少重复的目的。
2.mixins混入
ue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项中。
简单的说，组件在引用之后就相当于在父组件内开辟了一块单独的空间，然后根据父组件props过来的值进行相应的操作。而使用mixins机制的组件则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并，然后再执行渲染。即
单纯组件引用
父组件 + 子组件 >>> 父组件 + 子组件
mixins组件
父组件 + 子组件 >>> new父组件
同时，使用mixins机制的组件，多个组件之间可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。如果项目中有使用vue-router，那么组件将自动使用mixins机制。
下面是mixin的一个使用示例： 1，定义一个 js 文件(mixin.js)：
export default {
data() {
return {
name: 'mixin'
}
},
created() {
console.log('mixin...', this.name);
},
mounted() {},
methods: {}
}
2，然后在vue文件中使用mixin。
import '@/mixin'; // 引入mixin文件
export default {
mixins: [mixin]
}
