Preliminary understanding of Vueuse

This article is for personal learning record only (and training eloquence)

Front end add delete change inspector one

Recently started developing projects with Vue3

Not surprisingly, there have been a number of vUe-related libraries (cults), such as Vueuse and VUE-Request

Lamenting the bosses’ keen sense of new technology, I want to learn their thinking

  1. Open Github for Vueuse

  2. Go to the Packages /core directory

  3. There are a lot of things, as a rookie, I found something that looks familiar, useWindowSize

  1. Code parsing (shallow) (read)
/** * The logic is still very clear * to get a response to the size of the window ** is essentially a function ** takes the window object, the initial width, and the initial height */
export function useWindowSize({
  window = defaultWindow,
  initialWidth = Infinity,
  initialHeight = Infinity
}: WindowSizeOptions = {}) {
/** Declare two responsive variables, one width and one height */
  const width = ref(initialWidth);
  const height = ref(initialHeight);
/** Declare an update method whose API source is the innerWidth innerHeight of the window object */
  const update = () = > {
    if (window) {
      width.value = window.innerWidth;
      height.value = window.innerHeight; }};/** execute */
  update();
/** mounted may cause dom changes
  tryOnMounted(update);
/** Resize */
  useEventListener("resize", update, { passive: true });

  return { width, height };
}

Copy the code
  1. TryOnMounted and useEventListener

It’s not uncommon for open source libraries to have these common methods or logic that can be reused. When you read a particular code, it feels like you understand the semantics first. If you come across one, it will take a lot of time and effort to read it

  1. If useWindowSize is not used, how to achieve the same logic, we need to write the update timing ourselves, no matter using a separate JS file, or directly in the component writing, on the one hand, this is incompatible with the responsive development mode, on the other hand, it will make the code very inelegant. Having this logic managed in a separate file and responsive makes business code much purer.

Individual analysis

The logic of useWindowSize is clear and easy to understand

Thanks to the big guys’ development, can help us open the field of vision, chisel the wall to borrow the feeling of light

So I use it directly, and I think about some questions

Why use it

Since the use of hooks or vue-like code organization, which are used by some for human purposes and others for interviews, I think we should really understand the philosophy of this approach. The purpose of the combined-api mentioned in the official vUE documentation, And the current use of these open source libraries, whether there is the possibility of abuse or use for the sake of use

What is the hooks

  1. A new grammar?
  2. A new way to organize code?
  3. A trend?
  4. Can you get a raise?

From my humble understanding, it should be a black box with data that we can read (reactive) and switches that we can manipulate, sort of like a reactive version of class

Component and hooks relationship

Personal think

Two concepts

Hooks are logic, abstractions

Hooks can also be utils, but hooks are only used in setup and do not completely replace utils

Components are complete applets, usually containing DOM structures

Components contain logic, but cannot be used without components

Components can now use hooks to manage logic that can be used without components

Hooks cannot replace components. Hooks can be used to better serve components and applications

What do hooks bring

  1. In Vue, the variables in data and methods in the.vue file (or js with render function) are relatively flat and do not need to worry much about order, whereas in hooks, There seems to be a bit of a return to the original JS approach, where you need to be aware of which variables or methods depend on previous variables (simply who comes first and who comes last), placing higher demands on Vue developers

  2. React-hooks can sort of break down the wall between Vue users and React users (sort of), developers who have used React-hooks before can easily understand and adapt to the new gameplay of Vue (if they are interested), Developers using Vue’s new usage will not be so fluffed when confronted with React hooks.

  3. Hooks will lead to more open source frameworks based on hooks, vue-Router and Vuex (or Pinia) will adapt accordingly

  4. In some open source code, it is clear that the structure of the code is confused by the excessive use of hooks, which have introduced other hooks, which have introduced other hooks, Which I would call a hell of hooks…

  5. Which are bound to bring in new interview standards and test content. I have already thought of a number of questions about why and why