Shulou(Shulou.com)06/02 Report--

This article focuses on "how to write a custom instruction for Vue3". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to write a custom instruction for Vue3.

Background

As we all know, the core idea of Vue.js is data-driven + componentization. Usually, the process of developing a page is to write some components and drive the re-rendering of the components by modifying the data. In this process, we do not need to manually manipulate DOM.

However, in some scenarios, we can't avoid manipulating DOM. Because the Vue.js framework takes over the process of creating and updating DOM elements, it can inject user code during the life cycle of DOM elements, so Vue.js designs and provides custom instructions that allow users to perform some underlying DOM operations.

Take a practical example-pictures are loaded lazily. Lazy loading of images is a common way to optimize performance, because it only loads images in the visual area, it can reduce a lot of unnecessary requests and greatly improve the user experience.

The implementation principle of picture lazy loading is also very simple, when the picture does not enter the visual area, we just need to let the src attribute of the img tag point to a default picture, and after it enters the visual area, replace its src to point to the real picture address.

If we want to achieve lazy loading of pictures in Vue.js projects, then it is more appropriate to use custom instructions, then let me take you hand-in-hand to use Vue3 to implement a custom instruction v-lazy for lazy loading of images.

Plug-in

To make this directive easily available to multiple projects, let's make it a plug-in:

Const lazyPlugin = {install (app, options) {app.directive ('lazy', {/ / instruction object})}} export default lazyPlugin

Then reference it in the project:

Import {createApp} from 'vue'import App from'. / App.vue'import lazyPlugin from 'vue3-lazy'createApp (App) .use (lazyPlugin, {/ / add some configuration parameters})

Usually a plug-in for Vue3 exposes the install function, which is executed when the app instance use the plug-in. Inside the install function, register a global directive through app.directive so that you can use them in the component.

The realization of instruction

The next thing we need to do is to implement the instruction object, an instruction definition object can provide multiple hook functions, such as mounted, updated, unmounted, etc., we can write the corresponding code in the appropriate hook function to achieve the requirements.

Before writing the code, we might as well consider a few key steps to achieve lazy image loading.

Picture management:

Manage the DOM of the picture, the real src, the preloaded url, the loading status, and the loading of the picture.

Judgment of visual area:

Determine whether the picture enters the visual area.

With regard to the management of pictures, we designed the ImageManager class:

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}})}

First of all, for a picture, it has three states: loading, loading complete, and loading failure.

When ImageManager is instantiated, in addition to initializing some data, the src of its corresponding img tag executes the loaded image loading, which is equivalent to the image loaded by default.

When the load method of the ImageManager object is executed, the state of the picture will be judged, and if it is still loading, then load its real src, here the loadImage image preloading technology is used to request the src picture, and after success, the src of the img tag is replaced, and the state is modified, so that the loading of the real address of the picture is completed.

With the image manager, we need to determine the visual area and manage the managers of multiple images, and design the Lazy class:

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: '0pxrabbit, 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)})}}

In this way, whenever the picture element binds the v-lazy instruction, and when the mounted hook function is executed, the add method of the Lazy object is executed. The first parameter el corresponds to the DOM element object corresponding to the picture, and the second parameter binding is the bound value of the instruction object, such as:

Where item.pic corresponds to the value bound by the instruction, so the real address of the image can be obtained through binding.value.

Once you have the DOM element object of the picture and the real picture address, you can create a picture manager object based on them, add it to the managerQueue, and observe the visual area of the picture DOM element.

As for the judgment of the picture entering the visual area, we mainly use IntersectionObserver API, which corresponds to the callback function parameter entries, which is an array of IntersectionObserverEntry objects. When the visible ratio of the observed element exceeds the specified threshold, the callback function is executed to traverse the entries, get each entry, and then determine whether the entry.isIntersecting is true. If so, it means that the DOM element corresponding to the entry object has entered the visual area.

Then the corresponding manager is found from the managerQueue according to the comparison of the DOM elements, and the loading state of the corresponding picture is determined.

If the picture is in the loading state, the manager.load function is executed at this time to complete the loading of the real picture; if it is in the loaded state, the corresponding manager is removed from the managerQueue directly, and the observation of the picture DOM element is stopped.

At present, we have implemented a series of processing of delayed loading after the picture elements are mounted to the page. However, when the element is unloaded from the page, you also need to perform some cleanup operations:

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)})}}

When the element is uninstalled, its corresponding image manager is also removed from the managerQueue and stops viewing the image DOM element.

In addition, if you dynamically modify the value bound by the v-lazy instruction, that is, the request address of the real image, then the corresponding modification should be made inside the instruction:

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)})}}

So far, we have implemented a simple picture lazy load instruction, on this basis, can we do some optimization?

Optimization of instructions

In the process of loading the real url of images, we use loadImage to preload images, so it is obvious that for multiple images with the same url, preloading only needs to be done once.

To achieve the above requirements, we can create a cache cache inside the Lazy module:

Export default class Lazy {constructor (options) {/ /... This.cache = new Set ()}}

Then when you create the ImageManager instance, pass the cache in:

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

Then make the following changes to 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 ()})}

Determine whether it already exists in the cache before each load execution, and then update the cache after the loadImage preload picture is successfully executed.

Through this space-for-time method, some repeated url requests are avoided and the performance is optimized.

At this point, I believe you have a deeper understanding of "how to write a custom instruction for Vue3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.