В чем черная магия Vue3 Hook?

внешний интерфейс Vue.js
В чем черная магия Vue3 Hook?

Я слышал это раньше,Reactсообщество, принялоHook.Vue3Релиз также поддерживает пользовательскиеHook, как толькоVueФермеры, работающие с малым кодом переднего плана, естественно, хотят взглянутьVue3 HookКакая к черту черная магия?

Персональный блог сайта приветствует общение:Лес Firefly: https://blog.xkongkeji.com

С точки зрения непонимания React Hook, что такое хук?

  • Официальная настройка VueHookПример такой:
import { ref, onMounted, onUnmounted } from "vue";

export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  function update(e) {
    x.value = e.pageX;
    y.value = e.pageY;
  }

  onMounted(() => {
    window.addEventListener("mousemove", update);
  });

  onUnmounted(() => {
    window.removeEventListener("mousemove", update);
  });

  return { x, y };
}

Используемые компоненты:

import { useMousePosition } from "./mouse";

export default {
  setup() {
    const { x, y } = useMousePosition();
    return { x, y };
  },
};

верить писатьvue2друзья должны были бытьMixinДоминировал, особенно когда я получил проект, с которым я должен был быть незнаком, это был кошмар, все видыMixin, всевозможные переменные, методы, не видно, откуда они берутся.

Положение мыши можно четко определить с помощью кодаX,YОтuseMousePositionфункция,useMousePositionэто функция, которая используетcomposition-apiРеактивные данные определеныX,YЗатем экспорт, личное чувство, чтобыmixinОн был разделен, а операция импорта была передана разработчику.В прошлом Vue напрямую помогал нам объединять данные вместе, но это приводило к проблеме, что данные нельзя было отследить.

Личное понимание, добро пожаловать, чтобы исправить

  • hookможно считать прежнимmixinиспользовать
  • hookэто функция,mixinявляется объектом
  • hookразделенная версияmixin, передать операцию импорта разработчику,mixinсогласно соответствующемуoptions ApiСлияние непосредственно с компонентом
  • hookможно одолжитьcomposition-apiполностью использованvueспособность, короче говоря, выsetupФункцию можно использоватьhookможет быть использован.

Ссылаться на

1. [Интенсивное чтение «API функций Vue3.0»]nuggets.capable/post/684490…

2. [Чем так хорош Vue3? (Подробное сравнение с React Hook)])]сегмент fault.com/ah/119000002…

Категории