如何写一个 Vue3 的自定义指令

目录
  • 背景
  • 插件
  • 指令的实现

前端巅峰 
以下文章来源于微信公众号前端巅峰

背景

众所周知,Vue.js 的核心思想是数据驱动 + 组件化,通常我们开发页面的过程就是在编写一些组件,并且通过修改数据的方式来驱动组件的重新渲染。在这个过程中,我们不需要去手动操作 DOM。

然而在有些场景下,我们还是避免不了要操作 DOM。由于 Vue.js 框架接管了 DOM 元素的创建和更新的过程,因此它可以在 DOM 元素的生命周期内注入用户的代码,于是 Vue.js 设计并提供了自定义指令,允许用户进行一些底层的 DOM 操作。

举个实际的例子——图片懒加载。图片懒加载是一种常见性能优化的方式,由于它只去加载可视区域图片,能减少很多不必要的请求,极大的提升用户体验。

而图片懒加载的实现原理也非常简单,在图片没进入可视区域的时候,我们只需要让 img 标签的 src 属性指向一张默认图片,在它进入可视区后,再替换它的 src 指向真实图片地址即可。

如果我们想在 Vue.js 的项目中实现图片懒加载,那么用自定义指令就再合适不过了,那么接下来就让我手把手带你用 Vue3 去实现一个图片懒加载的自定义指令 v-lazy。

插件

为了让这个指令方便地给多个项目使用,我们把它做成一个插件:

const lazyPlugin = {
  install (app, options) {
    app.directive('lazy', {
      // 指令对象
    })
  }
}

export default lazyPlugin

然后在项目中引用它:

import { createApp } from 'vue'
import App from './App.vue'
import lazyPlugin from 'vue3-lazy'

createApp(App).use(lazyPlugin, {
  // 添加一些配置参数
})

通常一个 Vue3 的插件会暴露 install 函数,当 app 实例 use 该插件时,就会执行该函数。在 install 函数内部,通过 app.directive 去注册一个全局指令,这样就可以在组件中使用它们了。

指令的实现

接下来我们要做的就是实现该指令对象,一个指令定义对象可以提供多个钩子函数,比如 mountedupdatedunmounted 等,我们可以在合适的钩子函数中编写相应的代码来实现需求。

在编写代码前,我们不妨思考一下实现图片懒加载的几个关键步骤。

图片的管理:

管理图片的 DOM、真实的 src、预加载的 url、加载的状态以及图片的加载。

可视区的判断:

判断图片是否进入可视区域。

关于图片的管理,我们设计了 ImageManager 类:

const State = {
  loading: 0,
  loaded: 1,
  error: 2
}

export class ImageManager {
  constructor(options) {
    this.el = options.el
    this.src = options.src
    this.state = State.loading
    this.loading = options.loading
    this.error = options.error
    
    this.render(this.loading)
  }
  render() {
    this.el.setAttribute('src', src)
  }
  load(next) {
    if (this.state > State.loading) {
      return
    }
    this.renderSrc(next)
  }
  renderSrc(next) {
    loadImage(this.src).then(() => {
      this.state = State.loaded
      this.render(this.src)
      next && next()
    }).catch((e) => {
      this.state = State.error
      this.render(this.error)
      console.warn(`load failed with src image(${this.src}) and the error msg is ${e.message}`)
      next && next()
    })
  }
}

export default function loadImage (src) {
  return new Promise((resolve, reject) => {
    const image = new Image()

    image.onload = function () {
      resolve()
      dispose()
    }

    image.onerror = function (e) {
      reject(e)
      dispose()
    }

    image.src = src

    function dispose () {
      image.onload = image.onerror = null
    }
  })
}

首先,对于图片而言,它有三种状态,加载中、加载完成和加载失败。

ImageManager 实例化的时候,除了初始化一些数据,还会把它对应的 img 标签的 src 执行加载中的图片 loading,这就相当于默认加载的图片。

当执行 ImageManager 对象的 load 方法时,就会判断图片的状态,如果仍然在加载中,则去加载它的真实 src,这里用到了 loadImage 图片预加载技术实现去请求 src 图片,成功后再替换 img 标签的 src,并修改状态,这样就完成了图片真实地址的加载。

有了图片管理器,接下来我们就需要实现可视区的判断以及对多个图片的管理器的管理,设计 Lazy 类:

const DEFAULT_URL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'

export default class Lazy {
  constructor(options) {
    this.managerQueue = []
    this.initIntersectionObserver()
    
    this.loading = options.loading || DEFAULT_URL
    this.error = options.error || DEFAULT_URL
  }
  add(el, binding) {
    const src = binding.value
    
    const manager = new ImageManager({
      el,
      src,
      loading: this.loading,
      error: this.error
    })
    
    this.managerQueue.push(manager)
    
    this.observer.observe(el)
  }
  initIntersectionObserver() {
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const manager = this.managerQueue.find((manager) => {
            return manager.el === entry.target
          })
          if (manager) {
            if (manager.state === State.loaded) {
              this.removeManager(manager)
              return
            }
            manager.load()
          }
        }
      })
    }, {
      rootMargin: '0px',
      threshold: 0
    })
  }
  removeManager(manager) {
    const index = this.managerQueue.indexOf(manager)
    if (index > -1) {
      this.managerQueue.splice(index, 1)
    }
    if (this.observer) {
      this.observer.unobserve(manager.el)
    }
  }
}

const lazyPlugin = {
  install (app, options) {
    const lazy = new Lazy(options)

    app.directive('lazy', {
      mounted: lazy.add.bind(lazy)
    })
  }
}

这样每当图片元素绑定 v-lazy 指令,且在 mounted 钩子函数执行的时候,就会执行 Lazy 对象的 add 方法,其中第一个参数 el 对应的就是图片对应的 DOM 元素对象,第二个参数 binding 就是指令对象绑定的值,比如:

<img class="avatar" v-lazy="item.pic">

其中 item.pic 对应的就是指令绑定的值,因此通过binding.value 就可以获取到图片的真实地址。

有了图片的 DOM 元素对象以及真实图片地址后,就可以根据它们创建一个图片管理器对象,并添加到 managerQueue 中,同时对该图片 DOM 元素进行可视区的观察。

而对于图片进入可视区的判断,主要利用了 IntersectionObserver API,它对应的回调函数的参数 entries,是 IntersectionObserverEntry 对象数组。当观测的元素可见比例超过指定阈值时,就会执行该回调函数,对 entries 进行遍历,拿到每一个 entry,然后判断 entry.isIntersecting 是否为 true,如果是则说明 entry 对象对应的 DOM 元素进入了可视区。

然后就根据 DOM 元素的比对从 managerQueue 中找到对应的 manager,并且判断它对应图片的加载状态。

如果图片是加载中的状态,则此时执行manager.load 函数去完成真实图片的加载;如果是已加载状态,则直接从 managerQueue 中移除其对应的管理器,并且停止对图片 DOM 元素的观察。

目前,我们实现了图片元素挂载到页面后,延时加载的一系列处理。不过,当元素从页面卸载后,也需要执行一些清理的操作:

export default class Lazy {
  remove(el) {
    const manager = this.managerQueue.find((manager) => {
      return manager.el === el
    })
    if (manager) {
      this.removeManager(manager)
    }
  }
}

const lazyPlugin = {
  install (app, options) {
    const lazy = new Lazy(options)

    app.directive('lazy', {
      mounted: lazy.add.bind(lazy),
      remove: lazy.remove.bind(lazy)
    })
  }
}

当元素被卸载后,其对应的图片管理器也会从 managerQueue 中被移除,并且停止对图片 DOM 元素的观察。

此外,如果动态修改了 v-lazy 指令绑定的值,也就是真实图片的请求地址,那么指令内部也应该做对应的修改:

export default class ImageManager {
  update (src) {
    const currentSrc = this.src
    if (src !== currentSrc) {
      this.src = src
      this.state = State.loading
    }
  }  
}

export default class Lazy {
  update (el, binding) {
    const src = binding.value
    const manager = this.managerQueue.find((manager) => {
      return manager.el === el
    })
    if (manager) {
      manager.update(src)
    }
  }    
}

const lazyPlugin = {
  install (app, options) {
    const lazy = new Lazy(options)

    app.directive('lazy', {
      mounted: lazy.add.bind(lazy),
      remove: lazy.remove.bind(lazy),
      update: lazy.update.bind(lazy)
    })
  }
}

至此,我们已经实现了一个简单的图片懒加载指令,在这个基础上,还能做一些优化吗?

指令的优化
在实现图片的真实 url 的加载过程中,我们使用了 loadImage 做图片预加载,那么显然对于相同 url 的多张图片,预加载只需要做一次即可。

为了实现上述需求,我们可以在 Lazy 模块内部创建一个缓存 cache:

export default class Lazy {
  constructor(options) {
    // ...
    this.cache = new Set()
  }
}

然后在创建 ImageManager 实例的时候,把该缓存传入:

const manager = new ImageManager({
  el,
  src,
  loading: this.loading,
  error: this.error,
  cache: this.cache
})

然后对 ImageManager 做如下修改:

export default class ImageManager {
  load(next) {
    if (this.state > State.loading) {
      return
    }
    if (this.cache.has(this.src)) {
      this.state = State.loaded
      this.render(this.src)
      return
    }
    this.renderSrc(next)
  }
  renderSrc(next) {
    loadImage(this.src).then(() => {
      this.state = State.loaded
      this.render(this.src)
      next && next()
    }).catch((e) => {
      this.state = State.error
      this.cache.add(this.src)
      this.render(this.error)
      console.warn(`load failed with src image(${this.src}) and the error msg is ${e.message}`)
      next && next()
    })  
  }
}

在每次执行 load 前从缓存中判断是否已存在,然后在执行 loadImage 预加载图片成功后更新缓存。

通过这种空间换时间的手段,就避免了一些重复的 url 请求,达到了优化性能的目的。

总结:

懒加载图片指令完整的指令实现,可以在 vue3-lazy 中查看, 在我的课程《Vue3 开发高质量音乐 Web app》中也有应用。

懒加载图片指令的核心是应用了 IntersectionObserver API 来判断图片是否进入可视区,该特性在现代浏览器中都支持,但 IE 浏览器不支持,此时可以通过监听图片可滚动父元素的一些事件如 scroll、resize 等,然后通过一些 DOM 计算来判断图片元素是否进入可视区。不过 Vue3 已经明确不再支持 IE,那么仅仅使用 IntersectionObserver API 就足够了。

除了懒加载图片自定义指令中用到的钩子函数,Vue3 的自定义指令还提供了一些其它的钩子函数,你未来在开发自定义指令时,可以去查阅它的文档,在适合的钩子函数去编写相应的代码逻辑。

相关链接:

[1] IntersectionObserver: https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

[2] vue3-lazy: https://github.com/ustbhuangyi/vue3-lazy

[3] 《Vue3 开发高质量音乐 Web app》:https://coding.imooc.com/class/503.html

[4] Vue3 自定义指令文档: https://v3.cn.vuejs.org/guide/custom-directive.html

时间: 2022-01-07

vue3.0自定义指令(drectives)知识点总结

在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做. const app = Vue.createApp({ mounted(){ this.$refs.input.focus(); }, template: `<input type="text" ref="input" />`, }); 在mou

Vue3.0写自定义指令的简单步骤记录

前言 vue中提供了丰富的内置指令,如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令 在开始学习之前我们应该理解,自定义指令的应用场景,任何功能的开发都是为了解决具体的问题的, 通过自定义指令,我们可以对DOM进行更多的底层操作,这样不仅可以在某些场景下为我们提供快速解决问题的思路,而且让我们对vue的底层有了进一步的了解 第一步 在main.js 在src下简历对应的文件夹 import Direc

理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

目录 Vue2.x用法 全局注册 局部注册 使用 钩子函数 钩子函数的参数 Vue3.x用法 全局注册 局部注册 使用 钩子函数 较 Vue2.x 相比, 钩子函数有变化 Vue2.x用法 全局注册 Vue.directive( 指令名, { 自定义指令生命周期 } ) 局部注册 directives: { 指令名, { 自定义指令生命周期 } } 使用 v-指令名: 属性名.修饰符="value值" 钩子函数 bind - 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只

vue3&nbsp;自定义指令详情

目录 一.注册自定义指令 1.1.全局自定义指令 1.2.局部自定义指令 二.自定义指令中的生命周期钩子函数 三.自定义指令钩子函数的参数 四.自定义指令参数 一.注册自定义指令 以下实例都是实现一个输入框自动获取焦点的自定义指令. 1.1.全局自定义指令 在vue2中,全局自定义指令通过 directive 挂载到 Vue 对象上,使用 Vue.directive('name',opt). 实例1:Vue2 全局自定义指令 Vue.directive('focus',{ inserted:(e

详解在Vue中通过自定义指令获取dom元素

vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

详解Vue用自定义指令完成一个下拉菜单(select组件)

这次分享的是关于Vue自定义指令的使用方法,学习完基础后我们再来实战完成一个下拉列表,废话不多说,直接上干货 基本用法 //全局注册 Vue.directive('my-directive', { // 指令选项 }) // 局部注册 var app = new Vue({ el: '#app' directives: { 'my-directive': { // 指令选项 } }) 相信对Vue比较熟悉的人看完都知道,directive的写法与组件 基本类似,只是方法名由component改为

详解Angularjs 自定义指令中的数据绑定

有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊 到底怎么用 这个话题. 一. 自定义指令 自定义指令,是 Angularjs 用来实现组件化的方式,相比于 React 和 Vue 的组件化方式,它真的很复杂,自定义指令太重了,它暴露了太多可供定制的参数,以至于普通的开发者完全不知道要用它来做什么而将其束之高阁,毕竟一般的业务逻辑通过controller和service就已经可以完成了. 自定义指令在 Angularjs

使用vue自定义指令开发表单验证插件validate.js

这段时间在进行一个新项目的前期搭建,新项目框架采用vue-cli3和typescirpt搭建.因为项目比较轻量,所以基本没有使用额外的ui组件,有时候我们需要的一些基础组件我就直接自己开发了.今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程. 1.vue插件开发 关于vue的插件开发,官方文档里有很清晰的说明,详情可以去阅读开发文档.我自己开发的表单验证插件validate.ts和loading,messageBox插件都是利用了这种方式.今天先来看表单验

Vue 自定义指令实现一键 Copy功能

先看下效果图: 指令是啥? 按照惯例,先请出官方的解释: 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 再按照惯例,大家 ( 假装 ) 看不懂,然后我来举个栗子解释一番...好,还是不知所云,本文结束 ( Ctrl + F4 ) ,下一篇. 为了避免上述情况出现,就不解释了.实际上官方提供了很多内置指令,

vue自定义指令directive的使用方法

Vue中内置了很多的指令,如v-model.v-show.v-html等,但是有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别的功能,这时候,我们就需要用到vue中一个很强大的功能了-自定义指令. 在开始之前,我们需要明确一点,自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作,所以我们不能盲目的胡乱的使用自定义指令. 如何声明自定义指令? 就像vue中有全局组件和局部组件一样,他也分全局自定义指令和局部指令. let Opt = { bind:function(e

Angular.js通过自定义指令directive实现滑块滑动效果

前言 最近因为工作需要让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(directive). 方法如下 1.下面是我html部分代码,detail-scroll是我自定义的标签 ............... <div id="time" style="position: relative;"> <div n

AngularJS使用自定义指令替代ng-repeat的方法

前言 大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些.特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15

angularjs 表单密码验证自定义指令实现代码

html代码 <form name="form"> <input type="password" name="password" ng-model="password" required placeholder="请输入密码"> <input type="password" name="passwordConfirm" ng-model=

AngularJS优雅的自定义指令

学习要点  •为什么使用指令  •创建自定义指令 •使用jqLite工作 一.为什么使用自定义指令 NG内置了许多自定义指令,但是它们有时并不能满足你的要求,这是需要我们创建自定义属性. 二.自定义指令 接下来,我们来做一个小案例,当鼠标单击加价后,列表项自动递增,当然列表也是通过指令自动添加的,它本就是一个空的div <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head