【深入vue3 之 directive 指令的使用与讲解】

自定义全局指令:实例app.directive()

  • 参数:
    • {string} name
    • {Function | Object} [definition]
  • 返回值:
    • 如果传入 definition 参数,则返回应用实例。
    • 如果不传入 definition 参数,则返回指令定义。
  • 用法:
    • 注册或检索全局指令。
  • 自定义指令概念:
    • 在 Vue 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
    • 自定义指令是vue提供给我们用原生DOM封装一系列DOM相关功能、视图变化的一个接口(API)
    • 综上,使用指令封装底层时,基本都在使用原生JS进行代码编写,所以要熟悉使用原生!

模板内使用指令方式:v-[指令名]


注册全局指令 ,参数讲解:

  • name:有啥好讲的,就是指令名。。
  • definition:
    • 指令具有7个生命周期(见下面代码)
    • 4个参数
      • el:指令绑定到的元素。这可用于直接操作 DOM。

      • binding:

        1. instance : 使用指令的组件实例。

        2. value : 传递给指令的值。例如,在 v-my-directive="1 + 1" 中,该值为 2。可传递任意类型的数据!指令函数能够接受所有合法的 JavaScript 表达式。

        3. oldValue : 先前的值,仅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。

        4. arg : 参数传递给指令 (如果有)。例如在 v-my-directive:foo 中,arg 为 "foo"。注意:值只有一个,且是字符串。指令参数名可是动态的:v-my-directive:[argName]="anyData"

        5. modifiers : 包含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar 中,修饰符对象为 {foo: true,bar: true}。

        6. dir : 一个对象,在注册指令时作为参数传递。简单来说,就是现在这的 content:{} 对象内的所有生命周期数据。

      • vnode:上面作为 el 参数收到的真实 DOM 元素的蓝图,el树的所有节点。

      • prevNode : 上一个虚拟节点,仅在 beforeUpdate 和 updated 钩子中可用。

      • (注意 1:如上一点所说,除了这2个生命周期有这4个参数,其他的5个生命周期都是只有前面3个参数)

      • (注意 2:除了 el 之外,你应该将这些参数视为只读,并且永远不要修改它们。如果你需要跨钩子共享信息,建议通过元素的自定义数据属性集进行共享。)

第二个参数为对象写法:(对象写法包含所有的指令的生命周期)

import { createApp } from 'vue'
const app = createApp(App)
app.directive('highlight',{
  created(el, binding, vnode) {

  },
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  },
  mounted(el, binding, vnode) {},
  beforeUpdate(el, binding, vnode, prevVnode) { 
    //! 第四个参数 prevNode 只在beforeUpdate和updated才有!
    el.style.background = binding.value
  },
  updated(el, binding, vnode, prevVnode) {},
  beforeUnmount(el, binding, vnode) {
    // 当指令绑定的元素 的父组件销毁前调用。  <简单讲,指令元素的父组件销毁前调用>
  },
  unmounted(el, binding, vnode) {
    // 当指令与元素解除绑定且父组件已销毁时调用。
  },
})

第二个参数为函数:(固定只在2个生命周期上触发)在前面的例子中,你可能想在 mounted 和 updated 时触发相同行为,而不关心其他的钩子函数。那么你可以通过将这个回调函数传递给指令来实现:

import { createApp } from 'vue'
const app = createApp(App)
app.directive('highlight',(el,binding,vNode,prevNode)=>{
  console.log(el,binding,vNode,pre);
  // 注意 prevNode 只有在 updated 生命周期才有值!
})

在组件中使用:

  • 绑定在组件时,如果该组件有根组件,则自动继承到组件的根节点上。
  • 有了片段支持以后,组件可能会有多个根节点。当被应用在一个多根节点的组件上时,指令会被忽略,并且会抛出一个警告。
  • 指令不会通过 v-bind="$attrs" 被传入另一个元素。

关于 组件继承 和 v-bind="$attrs" 深入请看 vue3 `inheritAttrs`属性继承与`$attrs`使用与讲解


检索全局指令

上面讲了使用和注册,此处讲解检索全局指令,不过没想到有好的应用场景,欢迎评论留言交流。

import { createApp } from 'vue'
import fontDirective from '@directive/font'
const app = createApp(App)
app.use(fontDirective) // 此处注册了 'highlight' 指令

// 案例1:
let definition = app.directive('highlight')
console.log(definition) // 已注册的指令会返回对应指令你声明的各生命周期

let definition2 = app.directive('kumiko')
console.log(definition) // 打印 undefined >> 如果未注册指令,返回 undefined

// 案例2:
// 如果你只是要检索,而不小心加了第2个参数,
// 那恭喜你,这就变成了注册指令,新的覆盖旧的。
let definition3 = app.directive('highlight',{})

// 奇葩案例3:
let definition4 = app.directive('highlight',null)
let definition5 = app.directive('highlight',undefined)
// 如果传的是这2个,那还是正常的检索功能,官方没说就最好不要这么玩,哪天v3更新后出bug,就恭喜你了。
// 如果传的不是 {},会提示报错、警告

以上是全局指令,组件options api的 directives 就懒得讲了。除了不是全局的,其他照旧。

你可能感兴趣的:(vue,前端,javascript,javascript,前端,vue.js)