一篇文章告诉你Vue3指令是如何实现的一篇文章告诉你Vue3指令是如何

前言
指令注册

全局注册
组件内注册

指令搜寻

指令搜寻的时机
指令搜寻的逻辑

指令绑定VNode

指令调用

关于指令的思考

组件上使用指令
组件上的一些使用场景

总结

前言 Vue 指令是指对普通DOM元素进行底层操作的JS对象，它们会被挂在Element VNode对象上，在Element VNode的一些生命周期中会被调用，从而可以操作Element VNode的底层DOM元素。

指令注册指令注册是指将指令对应的JS代码放置在某些地方，需要使用的时候可以在这些地方进行查找。

全局注册

全局注册是调用app.directive('指令名称', { 指令代码 }) 来实现的

app.directive('pin', (el, binding) => {el.style.position = 'fixed'const s = binding.arg || 'top'el.style[s] = binding.value + 'px'})

全局注册的逻辑是将指令名称和对应的指令代码挂载在全局的context的directives对象上

directive(name: string, directive?: Directive) {// 挂载在全局的`context`的`directives`对象上context.directives[name] = directivereturn app},

组件内注册

组件内注册是在组件内添加 directives 的选项

directives: {pin: (el, binding) => {el.style.position = 'fixed'const s = binding.arg || 'top'el.style[s] = binding.value + 'px'}}

组件注册的逻辑是将指令名称和对应的指令代码挂载在组件实例对象的directives上

export function applyOptions(instance: ComponentInternalInstance) {// 挂载在组件实例对象的`directives`上instance.directives = directives}

指令搜寻
指令搜寻的时机
开发者是在模板中使用指令，所以应该是在模板渲染的时候需要先搜寻到对应的指令。
不使用指令的模板指令演示渲染函数如下：

function render(_ctx, _cache) {with (_ctx) {const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vuereturn (_openBlock(), _createElementBlock("h4", null, "指令演示"))}}

使用指令的模板指令演示渲染函数如下：

function render(_ctx, _cache) {with (_ctx) {const { createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vueconst _directive_pin = _resolveDirective("pin")return _withDirectives((_openBlock(), _createElementBlock("h4", null, _hoisted_2, 512 /* NEED_PATCH */)), [[_directive_pin, pinPadding, direction]])}}

文章图片

使用指令的模板需要先搜寻对应的指令，然后绑定指令到VNode

指令搜寻的逻辑

指令搜寻的逻辑是先从组件实例instance的directives上寻找，如果没找到再在appContext的directives上寻找

export function resolveDirective(name: string): Directive | undefined {return resolveAsset(DIRECTIVES, name)}function resolveAsset(type: AssetTypes,name: string,warnMissing = true,maybeSelfReference = false) {const res =// local registration// check instance[type] first which is resolved for options APIresolve(instance[type] || (Component as ComponentOptions)[type], name) ||// global registrationresolve(instance.appContext[type], name)return res}

指令绑定VNode

export function withDirectives(vnode: T,directives: DirectiveArguments): T {const bindings: DirectiveBinding[] = vnode.dirs || (vnode.dirs = [])for (let i = 0; i < directives.length; i++) {let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]if (isFunction(dir)) {dir = {mounted: dir,updated: dir} as ObjectDirective}bindings.push({dir,instance,value,oldValue: void 0,arg,modifiers})}return vnode}

将每个指令dir和其他一些参数挂载在 VNode的dirs上。其他参数是: instance组件实例, value指令的新值(本例为20)，oldValue指令的旧值(本例为0)，arg指令的参数(本例为right)

指令调用指令调用是指指令的代码什么时候被执行的？我们最开始提到指令是对普通DOM元素进行底层操作的JS对象，所以指令的逻辑应该是在 Element VNode中进行处理的。

const mountElement = (vnode: VNode,container: RendererElement,anchor: RendererNode | null,parentComponent: ComponentInternalInstance | null,parentSuspense: SuspenseBoundary | null,isSVG: boolean,slotScopeIds: string[] | null,optimized: boolean) => {// 1if (dirs) {invokeDirectiveHook(vnode, null, parentComponent, 'created')}// 2if (dirs) {invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount')}// 3queuePostRenderEffect(() => {vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode)needCallTransitionHooks && transition!.enter(el)dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted')}, parentSuspense)}

const patchElement = (n1: VNode,n2: VNode,parentComponent: ComponentInternalInstance | null,parentSuspense: SuspenseBoundary | null,isSVG: boolean,slotScopeIds: string[] | null,optimized: boolean) => {const el = (n2.el = n1.el!)// 1if (dirs) {invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate')}// 2queuePostRenderEffect(() => {vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1)dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated')}, parentSuspense)}

const unmount: UnmountFn = (vnode,parentComponent,parentSuspense,doRemove = false,optimized = false) => {const {type,props,ref,children,dynamicChildren,shapeFlag,patchFlag,dirs} = vnode// unset refif (ref != null) {setRef(ref, null, parentSuspense, vnode, true)}if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {; (parentComponent!.ctx as KeepAliveContext).deactivate(vnode)return}const shouldInvokeDirs = shapeFlag & ShapeFlags.ELEMENT && dirslet vnodeHook: VNodeHook | undefined | nullif ((vnodeHook = props && props.onVnodeBeforeUnmount)) {invokeVNodeHook(vnodeHook, parentComponent, vnode)}if (shapeFlag & ShapeFlags.COMPONENT) {unmountComponent(vnode.component!, parentSuspense, doRemove)} else {if (shouldInvokeDirs) {invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount')}queuePostRenderEffect(() => {vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode)shouldInvokeDirs &&invokeDirectiveHook(vnode, null, parentComponent, 'unmounted')}, parentSuspense)}

在挂载元素VNode的时候，会调用指令的created, beforeMount和mounted钩子函数；
在更新元素VNode的时候，会调用指令的beforeUpdate, updated钩子函数；
在卸载元素VNode的时候，会调用指令的beforeUnmount, unmounted钩子函数；

关于指令的思考
组件上使用指令
我们上面提到了指令是作用在元素VNode上的，那组件使用指令(例如)是什么效果呢？结果是组件上使用的指令会作用在组件内部的根节点的元素VNode上。

export function renderComponentRoot(instance: ComponentInternalInstance): VNode {const {type: Component,vnode,proxy,withProxy,props,propsOptions: [propsOptions],slots,attrs,emit,render,renderCache,data,setupState,ctx,inheritAttrs} = instance// inherit directivesif (vnode.dirs) {if (__DEV__ && !isElementRoot(root)) {warn(`Runtime directive used on component with non-element root node. ` +`The directives will not function as intended.`)}root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs}}