今天小编给大家分享一下Vue3指令是怎么实现的的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
前言
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对象上
<!-- apiCreateApp.js -->directive(name: string, directive?: Directive) { // 挂载在全局的`context`的`directives`对象上 context.directives[name] = directive return app},组件内注册
组件内注册是在组件内添加 directives 的选项
directives: { pin: (el, binding) => { el.style.position = 'fixed' const s = binding.arg || 'top' el.style[s] = binding.value + 'px' }}组件注册的逻辑是将 指令名称 和 对应的指令代码 挂载在组件实例对象的directives上
<!-- component.ts -->export function applyOptions(instance: ComponentInternalInstance) { // 挂载在组件实例对象的`directives`上 instance.directives = directives }指令搜寻
指令搜寻的时机
开发者是在模板中使用指令，所以应该是在模板渲染的时候需要先搜寻到对应的指令。
不使用指令的模板<h5>指令演示</h5>渲染函数如下：
function render(_ctx, _cache) { with (_ctx) { const { openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue return (_openBlock(), _createElementBlock("h5", null, "指令演示")) }}使用指令的模板<h5 v-pin:[right]="20">指令演示</h5>渲染函数如下：
function render(_ctx, _cache) { with (_ctx) { const { createTextVNode: _createTextVNode, resolveDirective: _resolveDirective, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue const _directive_pin = _resolveDirective("pin") return _withDirectives((_openBlock(), _createElementBlock("h5", null, _hoisted_2, 512 )), [ [_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 API resolve(instance[type] || (Component as ComponentOptions)[type], name) || // global registration resolve(instance.appContext[type], name) return res}指令绑定VNode
export function withDirectives<T extends VNode>( 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) => { // 1 if (dirs) { invokeDirectiveHook(vnode, null, parentComponent, 'created') } // 2 if (dirs) { invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount') } // 3 queuePostRenderEffect(() => { 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!) // 1 if (dirs) { invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate') } // 2 queuePostRenderEffect(() => { 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 ref if (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 && dirs let vnodeHook: VNodeHook | undefined | null if ((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上的，那组件使用指令(例如<son v-pin:[right]="20"></son>)是什么效果呢？结果是组件上使用的指令会作用在组件内部的根节点的元素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 directives if (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 }}在组件渲染子树VNode的根VNode时候，会将组件的指令dirs添加在根元素VNode的dirs中。所以作用于组件的指令 等同于 作用于 根节点的元素VNode上。
组件上的一些使用场景
我觉得一些比较使用的指令的使用场景有：
v-lazyload: 图片的懒加载
v-loading：实现加一个加载动画
v-permission: 权限控制，没有权限就隐藏DOM元素
v-debounce: 输入防抖，特别是搜素框请求的输入
以上就是“Vue3指令是怎么实现的”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
