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

}

--------------------- 原文：https://blog.csdn.net/qq_27626333/article/details/77743719