一、指令

指令分为全局指令和组件内部指令即局部指令
具体使用过程中需要加上v-前缀
指令的使用场景：对普通DOM元素进行底层操作

// 一、全局指令
// 第一个参数是自定义指令的名称，第二个参数对象里面包含着钩子函数 
    Vue.directive('setBorder',{
        // 只调用一次，指令第一次绑定元素的时调用
        // 在这里可以进行一次性的初始化设置
        bind：function (el,binding,vnode){},
        // 被绑定元素插入父节点时调用
         // 仅保证父节点存在，但不一定已被插入文档中
        inserted:function(el,binding,vnode){}，
        // 所有组件的Vnode更新时调用
        // 但是可能发生在其子Vnode更新之前
        // 指令的值可能发生了改变，也可能没有
        // 但是可以通过比较更新前后的值来忽略不必要的模版更新
        update：function（el，binding，vnode，oldVnod){},
        // 指令所在组件的Vnode及其子VNode全部更新后调用
        componentUpdate：function (el，binding，vnode，oldVnod){},
        // 只调用一次，指令与元素解绑时调用
        upbind:function (el,binding,vnode){},
    })

// 二、局部指令
<template>
  <div class="wrapper">
    <input type="text" v-autoFocus placeholder="请输入内容" />
  </div>
</template>

<script>
export default {
  directives: {
    autoFocus: {
      inserted(el) {
        el.focus()
      },
    },
  },
}
</script>

二、mixin

Mixin是可以轻松被一个子类或一组子类继承功能的类，目的是函数复用
同名钩子函数会合并为一个数组，混入对象的钩子将在组件自身钩子之前调用
二者的methods、components和directives，将被合并为同一个对象，若对象健名冲突时，取组件对象的健值对
mixin仅仅只是对逻辑的复用，模版无法复用，组件复用建议以高级组建为准，同时通过插槽slot进行复原也是不错的选择

// 插槽
<template>
    <div class="Validate">
        <slot :validate="validate"></slot>
        {{errmsg}}
    </div>
</template>

<script>
export default {
  props: ['value', 'rules'],
  data () {
    return {
      errmsg: ''
    }
  },
  methods: {
    validate () {
      let check
      var validate = this.rules.reduce((pre, cur) => {
        check = cur && cur.test && cur.test(this.value)
        this.errmsg = check ? '' : cur.message
        return pre && check
      }, true)
      return validate
    }
  },
  components: {

  }
}
</script>

<template>
    <div>
        <!-- 姓名验证 -->
        <validate #default="{validate}" :rules="nameReles" :value="name">
            <input type="text" @blur="validate" v-model="name">
        </validate>
        <!-- 年龄验证 -->
        <validate #default="{validate}" :rules="ageRules" :value="age">
            <input type="text" @blur="validate" v-model="age">
        </validate>

    </div>
</template>

<script>
import Validate from './Validate'
export default {
  data () {
    return {
      age: '',
      name: '',
      ageRules: [ // 姓名的验证规则
        {
          test (value) {
            return /^\d+$/g.test(value)
          },
          message: '请输入数字'
        }
      ],
      nameReles: [ // 年龄的验证规则
        {
          test (value) {
            return /^[a-z]+$/g.test(value)
          },
          message: '请输入英文字母'
        }
      ]
    }
  },
  components: {
    Validate
  }
}
</script>

三、组件通信

1. props、emit 、ref、children、.sync父子组件通信
2. evenBus(emit/on)适用于父子、隔代、兄弟组件
3. $attrs / $listeners； provide / inject 适用于 隔代组件通信
4. Vuex 适用于 父子、隔代、兄弟组件通信
   主要包含以下模块
   State：定义数据结构，设置默认的初始化状态
   Getter：计算属性
   Mutaion：在严格模式下，是更改store中状态的唯一方法
   Action：用于处理异步数据
   Module：允许将单一的store拆分多个store且同时保存在单一的状态树中
   注意事项：工作中一般以props和emit为主；对于封装第三方高阶组件使用v-bind="$attrs"和v-on="$listerners"更合适；provide提供数据和inject注入数据，二者要结合在一起使用，绑定并不是响应的。但是我们可以通过provide提供一个函数来实现异步数据的响应

<script>
export default {
  provide() {
    return {
      getSeller: () => this.getSellers,
    }
  },
methods: {
getSellers(){}
}

四、.sync修饰符的双向绑定

如果对于props和emit父子双向通信感觉麻烦的话，使用.sync修饰符的双向绑定，会达到事半功倍的效果
v-bind:propName
v-on:update:propName