vue自定义指令VNode详解(转)

Z时代
2024-01-10
分类：综合

vue

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
}