Vue 3 | 自定义指令的新玩法

前端桃园

共 1762字,需浏览 4分钟

 ·

2020-08-09 00:50

开门见山 

按照惯例,从上帝视角看一下自定义指令在 Vue 3 中发生了哪些改变:

  • 自定义指令的 API 改了名字,名字更贴近组件的生命周期
  • 自定义指令可以通过子组件的 v-bind="$attr"传递


Vue2.x 的自定义指令 

在 Vue 2 中,自定义指令通过以下可选的钩子去创建:

  • bind:当指令绑定在对应元素时触发。只会触发一次。
  • inserted:当对应元素被插入到 DOM 的父元素时触发。
  • update:当元素更新时,这个钩子会被触发(此时元素的后代元素还没有触发更新)。
  • componentUpdated:当整个组件(包括子组件)完成更新后,这个钩子触发。
  • unbind:当指令被从元素上移除时,这个钩子会被触发。也只触发一次。

来看个例子:

<h1 v-highlight="red">这是一串被高亮为红色的字h1>
Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.background = binding.value;
  }
});

如上是一个很灵活的做法,通过指令传值的做法,可以供开发者根据使用场景的不同提供不同的参数,以达到不同的效果。


Vue 3 的自定义指令 

在 Vue 3 中,官方团队将自定义指令的 API 打造的更加“被人所熟悉”。正如你马上会看到的那样,尽管它们和组件的生命周期完全是两回事,但为了更有助于代码的可读性和风格统一,还是选择了比较接近的钩子名称:

  • bind => beforeMount
  • inserted => mounted
  • beforeUpdate: 新的钩子,会在元素自身更新前触发
  • update => 移除!
  • componentUpdated => updated
  • beforeUnmount: 新的钩子,当元素自身被卸载前触发
  • unbind => unmounted

所以,新版的自定义指令大概会长这个样子:

const NewDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {},
}

呐,上面的那个例子就会被改写成:

const app = Vue.createApp({});

app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value;
  },
});

改了名字之后,是不是更好记了呢?


细节,注意细节 

Vue 3 是支持 fragments 的,也就是说,我们可以在一个组件中保留多个根节点。

<template>
  <li>你好li>
  <li>我的li>
  <li>粉丝li>
template>

于是自定义指令就遇到了一个新的问题:自定义指令有多个根节点?

因此,现在的自定义指令已经是 Virtual DOM 节点的一部分了。当组件上挂载了自定义指令时,它的钩子会作为一个外部属性传递进组件内,最终“落地”于组件的 this.$attr

这也就意味着,像下面这种直接在元素上挂载生命周期钩子的写法,即将同样适用于自定义指令的钩子:

<div @vnodeMounted="myHook">div>

自定义指令向组件内传递 hook 的行为,和组件树中自上而下传递 prop 的行为是一致的。当一个组件给自身内部的元素绑定了 v-bind="$attr" 时,也会将自身的所有自定义指令都传递给自己的子元素。

 

如果想了解更详细的信息,请前往:https://v3.vuejs.org/guide/migration/custom-directives.html#overview(目前还没有中文版)



推荐阅读




我的公众号能带来什么价值?(文末有送书规则,一定要看)

每个前端工程师都应该了解的图片知识(长文建议收藏)

为什么现在面试总是面试造火箭?






「一个有温度的前端号」

长按识别二维码关注






浏览 131
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报