什么是指定义指令

因为vue有了常用的内置指令(v-model、v-bind和v-on等)，但是在项目需求你会有多个地方使用到同一个功能，例如：项目需求输入一个月的天数，我们知道1-31所以需要限制最大最小还不能有小数点，当然有些需求是要小数点后保留几位如金额等等(想不到了，你懂得！)。这些功能你也是可以使用方法实现的，但是使用到了自定义指令会让你的代码看上去更加的简洁易懂。

正文

vue2.x

这里我们先了解下自定义指定的生命周期：

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

这里是复制官网的显的专业些。下面我自己的理解：
bind相当就是vue的created，inserted感觉像mounted，它两的区别在于bind在inserted之前当组件渲染dom树触发父节点是null，inserted有父节点。然后就是update和componentUpdated的区别，update是组件新前，componentUpdated是组件更新后，最后在是unbind就是结束嘛（到了vue3.x的这些生命周期更加的好理解了）。

总结：bind >> inserted >> update >> componentUpdated >> unbind (小菜鸡的我只用inserted)

下面说他们都用如下的参数:

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：

name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=”1 + 1″ 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=”1 + 1″ 中，表达式为 “1 + 1″。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

这里也是官网复制来的。

总结：我就简单说说el就是你把指令写在那个标签元素上了，binding这个就是你需要绑定值啥啥等等就是上面说的。然后vnode就是vue把组件的data、method、子父组件一起打包产生一个object对象。

终于开始写代码了，这里是简单实现v-model的功能。

<template>
  <div>
    <input type="text" v-myModel="value" />
    {{ value }}
    <input type="checkbox" v-myModel="checked">
    {{checked}}
  </div>
</template>

<script>
export default {
  directives: {
    myModel: {
      inserted(el, binding, vnode) {
        if ((typeof binding.value) == 'undefined') {
          return console.error('v-myModel未赋值')
        }
        // 这里是获取input上type属性值
        const type = vnode.data.attrs.type
        let event = ''
        let targetValue = ''
        // 就是不同的类型有对应的事件和事件下获得的值
        switch (type) {
          case 'text':
            event = 'input'
            targetValue = 'value'
            break;
          case 'textarea':
            event = 'input'
            targetValue = 'value'
            break;
          case 'checkbox':
            event = 'change'
            targetValue = 'checked'
            break;
          case 'radio':
            event = 'change'
            targetValue = 'checked'
            break;
          case 'select':
            event = 'change'
            targetValue = 'value'
            break;

        }
        // binding.value就是给v-myModel的值,这里为1和false给页面渲染使用
        el.value = binding.value
        // 这里的监听就是给组件上的data赋值
        el.addEventListener(event, (e) => {
          vnode.context[binding.expression] = e.target[targetValue]
        })
      },
    }
  },
  data() {
    return {
      value: '1',
      checked: false
    }
  }
}
</script>

复制代码

这里我是使用了组件下面的directives选项，当然也是可以使用全局组成使用Vue.directive(‘指令名’, 对象/函数)函数与对象的区别？自己去查哈哈。

vue3.x

先来波自定义指令的生命周期：

created – 新的！在元素的 attribute 或事件侦听器应用之前调用。
bind → beforeMount
inserted → mounted
beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
componentUpdated → updated
beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
unbind -> unmounted

每个生命周期还是vue2.x的那4个参数。

直接上代码：

<template>
  <div>
    vue3.x
    <input type="text" v-myModel:value="value" />
    {{ value }}
    <input type="checkbox" v-myModel:checked="checked" />
    {{ checked }}
  </div>
</template>

<script lang='ts'>
import { ref } from 'vue'
export default {
  directives: {
    myModel: {
      mounted(el, binding, vnode) {
        if ((typeof binding.value) == 'undefined') {
          return console.error('v-myModel未赋值')
        }
        // 获得组件的实例对象
        let vm = binding.instance
        // 这里是获取input上type属性值
        const type = vnode.props.type
        let event = ''
        let targetValue = ''
        switch (type) {
          case 'text':
            event = 'input'
            targetValue = 'value'
            break;
          case 'textarea':
            event = 'input'
            targetValue = 'value'
            break;
          case 'checkbox':
            event = 'change'
            targetValue = 'checked'
            break;
          case 'radio':
            event = 'change'
            targetValue = 'checked'
            break;
          case 'select':
            event = 'change'
            targetValue = 'value'
            break;
        }
        el.value = binding.value
        // 给元素添加监听的事件
        el.addEventListener(event, (e) => {
          // binding.arg 为v-myModel:value的value、v-myModel:checked的checked,为了修改组件实例下面的value和checked。
          vm[binding.arg] = e.target[targetValue]
        })
      }
    }
  },
  setup() {
    const value = ref('11')
    const checked = ref(false)
    return {
      value,
      checked
    }
  },
}
</script>
复制代码

其实这里有一个问题如v-myModel:value=”value”如果不传:value在vm中是不知道修改哪个值，在vue官方介绍这个:value是有其他作用的,我查找了许多，未找到解决方法，如果有大佬知道求指教。

总结

vue2.x自定义指令生命周期 bind >> inserted >> update >> componentUpdated >> unbind
vue3.x自定义指令生命周期 created >> beforeMount >> mounted >> beforeUpdate >> updated >> beforeUnmount >> unmounted
都拥有的参数：el、binding、vnode、oldVnode。常用的为前三个。