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

This article introduces the relevant knowledge of "what is the role of Hooks in Vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

What does Hooks mean to Vue?

Hooks provides a more explicit way to organize code, so that code can be reused, and more importantly, it allows different logical parts to communicate and work together. [related recommendation: vue.js video tutorial]

Problem background

Why is Hooks proposed? As far as React is concerned, the initial background of the question is as follows:

Class is the most common form of organization when expressing the concept of state. There are some problems with the class itself, such as the long and complex binding relationship, which makes it difficult to read, and the direction of This is always confusing.

Not only that, in terms of reuse, it is common to use rendering tools or high-level component classes, but it is easy to fall into the "pyramid of doom" (Pyramid of Doomsday), which can be understood as excessive nesting.

Hooks is to solve these problems; Hooks allows us to use function calls to define the state logic of components, which are more combinative and reusable; at the same time, state access and maintenance can still be carried out.

Example: @ dan_abramov's code from # ReactConf2018

Figure ①

Figure ②

With the transformation from graphical ① to graphical ②, the component code is combined again, and then exported as a function for external reuse.

In terms of maintenance, Hooks provides a single, functional way to deal with shared logic and potentially reduce the amount of code.

Vue Hooks

Then why use Hooks in Vue? After all, classes are not used very frequently in Vue; in Vue we use mixin to solve the same reuse logic of components.

What's wrong with mixin? Can Hooks solve it?

There are two main problems:

Status cannot be transferred between mixin

The logical source is not clearly explained.

However, Hooks can solve these two points very well.

For example:

Transfer state

Hooks1

Import {useData, useMounted} from 'vue-hooks';export function windowwidth () {const data = useData ({width: 0}) useMounted (() = > {data.width = window.innerWidth}) / / this is something we can consume with the other hook return {data}}

Hooks2

/ / the data comes from the other hookexport function logolettering (data) {useMounted (function () {/ / this is the width that we stored in data from the previous hook if (data.data.width > 1200) {/ / we can use refs if they are called in the useMounted hook const logoname = this.$refs.logoname; Splitting ({target: logoname, by: "chars"}) TweenMax.staggerFromTo (".char", 5, {opacity: 0, transformOrigin: "50%-30px", cycle: {color: ["red", "purple", "teal"], rotationY (I) {return I * 50},.

Pass a value between two hooks:

Import {logolettering} from ". /.. / hooks/logolettering.js"; import {windowwidth} from ". /.. / hooks/windowwidth.js"; export default {hooks () {logolettering (windowwidth ());}}

We can use Hooks combinational logic throughout the application

The source is clear

In the src/hooks folder, a Hooks is created to implement: when you open the dialog box to view the contents, pause the page and allow you to scroll again after viewing the dialog box.

It is likely to be used many times in the application.

Import {useDestroyed, useMounted} from "vue-hooks"; export function preventscroll () {const preventDefault = (e) = > {e = e | window.event; if (e.preventDefault) e.preventDefault (); e.returnValue = false;} / / keycodes for left, up, right, down const keys = {37: 1, 38: 1, 39: 1, 40: 1}; const preventDefaultForScrollKeys = (e) = > {if (keys [e.keyCode]) {preventDefault (e) Return false;}} useMounted (() = > {if (window.addEventListener) / / older FF window.addEventListener ('DOMMouseScroll', preventDefault, false); _ window.onwheel = preventDefault; / / modern standard _ window.onmousewheel = _ document.onmousewheel = preventDefault; / / older browsers, IE window.touchmove = preventDefault; / / mobile window.touchstart = preventDefault; / / mobile _ document.onkeydown = preventDefaultForScrollKeys;}) UseDestroyed (() = > {if (window.removeEventListener) window.removeEventListener ('DOMMouseScroll', preventDefault, false); / / firefox window.addEventListener (' DOMMouseScroll', (e) = > {e.stopPropagation ();}, true); _ window.onmousewheel = _ document.onmousewheel = null; _ window.onwheel = null; window.touchmove = null; window.touchstart = null; _ document.onkeydown = null;});}

Call it in the AppDetails.vue component:

Import {preventscroll} from ". /.. / hooks/preventscroll.js";. Export default {. Hooks () {preventscroll ();}} "what is the purpose of Hooks in Vue" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.