vue自定义指令VNode详解

1、自定义指令钩子函数

Vue.directive('my-directive', {  bind: function () {    // 做绑定的准备工作    // 比如添加事件监听器，或是其他只需要执行一次的复杂操作  },  inserted: function (newValue, oldValue) {    // 被绑定元素插入父节点时调用  },  update: function (newValue, oldValue) {    // 根据获得的新值执行对应的更新    // 对于初始值也会被调用一次  },  unbind: function () {    // 做清理工作    // 比如移除在 bind() 中添加的事件监听器  }})

指令定义函数提供了几个钩子函数（可选）：

• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• update: 所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated: 所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
• unbind: 只调用一次， 指令与元素解绑时调用。
  接下来我们来看一下钩子函数的参数 (包括 el，binding，vnode，oldVnode) 。

---

2、钩子函数参数

钩子函数被赋予了以下参数：

• el: 指令所绑定的元素，可以用来直接操作 DOM 。
• binding: 一个对象，包含以下属性：
  
  • name: 指令名，不包括 v- 前缀。
  • value: 指令的绑定值， 例如： v-my-directive=”1 + 1”, value 的值是 2。
  • oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression: 绑定值的字符串形式。 例如 v-my-directive=”1 + 1” ， expression 的值是 “1 + 1”。
  • arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
    modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
• vnode: Vue 编译生成的虚拟节点
• oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

---

3、VNode接口

export default class VNode {  tag: string | void;  data: VNodeData | void;  children: ?Array<VNode>;  text: string | void;  elm: Node | void;  ns: string | void;  context: Component | void; // rendered in this component's scope  functionalContext: Component | void; // only for functional component root nodes  key: string | number | void;  componentOptions: VNodeComponentOptions | void;  componentInstance: Component | void; // component instance  parent: VNode | void; // component placeholder node  raw: boolean; // contains raw HTML? (server only)  isStatic: boolean; // hoisted static node  isRootInsert: boolean; // necessary for enter transition check  isComment: boolean; // empty comment placeholder?  isCloned: boolean; // is a cloned node?  isOnce: boolean; // is a v-once node?  asyncFactory: Function | void; // async component factory function  asyncMeta: Object | void;  isAsyncPlaceholder: boolean;  ssrContext: Object | void;  constructor (    tag?: string,    data?: VNodeData,    children?: ?Array<VNode>,    text?: string,    elm?: Node,    context?: Component,    componentOptions?: VNodeComponentOptions,    asyncFactory?: Function  ) {    this.tag = tag    this.data = data    this.children = children    this.text = text    this.elm = elm    this.ns = undefined    this.context = context    this.functionalContext = undefined    this.key = data && data.key    this.componentOptions = componentOptions    this.componentInstance = undefined    this.parent = undefined    this.raw = false    this.isStatic = false    this.isRootInsert = true    this.isComment = false    this.isCloned = false    this.isOnce = false    this.asyncFactory = asyncFactory    this.asyncMeta = undefined    this.isAsyncPlaceholder = false  }  // DEPRECATED: alias for componentInstance for backwards compat.  /* istanbul ignore next */  get child (): Component | void {    return this.componentInstance  }}export const createEmptyVNode = (text: string = '') => {  const node = new VNode()  node.text = text  node.isComment = true  return node}export function createTextVNode (val: string | number) {  return new VNode(undefined, undefined, undefined, String(val))}// optimized shallow clone// used for static nodes and slot nodes because they may be reused across// multiple renders, cloning them avoids errors when DOM manipulations rely// on their elm reference.export function cloneVNode (vnode: VNode, deep?: boolean): VNode {  const cloned = new VNode(    vnode.tag,    vnode.data,    vnode.children,    vnode.text,    vnode.elm,    vnode.context,    vnode.componentOptions,    vnode.asyncFactory  )  cloned.ns = vnode.ns  cloned.isStatic = vnode.isStatic  cloned.key = vnode.key  cloned.isComment = vnode.isComment  cloned.isCloned = true  if (deep && vnode.children) {    cloned.children = cloneVNodes(vnode.children)  }  return cloned}export function cloneVNodes (vnodes: Array<VNode>, deep?: boolean): Array<VNode> {  const len = vnodes.length  const res = new Array(len)  for (let i = 0; i < len; i++) {    res[i] = cloneVNode(vnodes[i], deep)  }  return res}

---

4、VNode

不存在父节点：

存在父节点：

v-IME自定义指令示例：

import { log } from 'SUtil'const install = Vue => {  let isBind = true  let IMEService = ''  let $this = new Vue({    data () {      return {        outEl: null,        outVnode: null      }    },    watch: {      outVnode (value, oldValue) {        if (oldValue) {          oldValue.componentInstance.isFocus = false        }      }    }  })  async function openIme (e, option) {    log.d('openIme', isBind, $this.$data.outVnode.componentInstance.percentValue)    if ($this.$data.outEl && IMEService && isBind) {      log.d('open')      $this.$data.outEl.target.focus()      let ret = await IMEService.open({        type: IMEService[option.type],        track: Number.parseInt(option.track),        w: Number.parseInt(option.w),        h: Number.parseInt(option.h),        x: Number.parseInt(option.x),        y: Number.parseInt(option.y)      })      if (ret.isSuccess) {        console.log('输入法开启成功')      }    }  }  async function closeIme (e) {    log.d('closeIme', isBind, $this.$data.outVnode.componentInstance.percentValue)    if ($this.$data.outEl && IMEService && isBind) {      log.d('close')      $this.$data.outVnode.componentInstance.isFocus = false      let ret = await IMEService.close()      if (ret.isSuccess) {        console.log('输入法关闭成功')      }    }  }  Vue.directive('IME', {    bind: function (el, binding, vnode) {      $this.$data.outVnode = vnode      if (window.taf && window.taf.service.IMEService) {        IMEService = window.taf.service.IMEService      } else {        log.e('IMEService 不存在')        $this.$data.outVnode.componentInstance.$emit('error', '输入法故障')        log.d('error', $this.$data.outVnode.componentInstance.percentValue)      }    },    inserted: function (el, binding, vnode) {      const inputDom = vnode.componentInstance.$el.querySelector('input')      if (inputDom) {        inputDom.addEventListener('focus', async focusEvent => {          log.d('focus')          $this.$data.outEl = focusEvent          $this.$data.outVnode = vnode          vnode.componentInstance.ctrlBlur = true          openIme(focusEvent, binding.value)        })        inputDom.addEventListener('click', async focusEvent => {          log.d('click')          $this.$data.outEl = focusEvent          $this.$data.outVnode = vnode          vnode.componentInstance.ctrlBlur = true          openIme(focusEvent, binding.value)        })        inputDom.addEventListener('blur', async focusEvent => {          log.d('blur')          $this.$data.outEl = focusEvent          $this.$data.outVnode = vnode          vnode.componentInstance.ctrlBlur = false          closeIme(focusEvent)        })      }      isBind = true    },    async unbind (el, binding, vnode) {      log.d('unbind')      if (window.taf && window.taf.service.IMEService) {        IMEService = window.taf.service.IMEService      } else {        log.e('IMEService 不存在')        $this.$data.outVnode.componentInstance.$emit('error', 'IMEService 不存在')        log.d('error', $this.$data.outVnode.componentInstance.percentValue)      }      const inputDom = vnode.componentInstance.$el.querySelector('input')      if (inputDom) {        inputDom.removeEventListener('click', openIme)        isBind = false        await IMEService.close()      }    }  })}export default {  install}