Vue의 Hooks에 대해 자세히 알아보고 Vue의 중요성에 대해 이야기해 보세요!

Vue에서 Hooks는 무엇을 의미하나요? 이 기사는 Vue의 Hooks를 이해하고 Vue의 중요성에 대해 이야기하는 데 도움이 될 것입니다.

이 글에서 이야기할 Hooks는 v16.7.0-alpha에서 React에 도입된 Lifecycle Hooks(라이프사이클 후크)와 다릅니다. Hooks는 React에서 제안되었지만 본질은 다음과 같습니다. 이 중요한 코드 조합 메커니즘은 전체 JavaScript 프레임워크 시스템에 큰 이점을 제공합니다. 오늘 잠시 시간을 내어 이에 대해 자세히 설명하겠습니다. Hooks는 Vue에 무엇을 의미합니까?

Hooks는 코드를 재사용할 수 있도록 코드를 구성하는 보다 명확한 방법을 제공하며, 더 중요한 것은 서로 다른 논리적 부분이 서로 통신하고 함께 작동할 수 있게 해준다는 것입니다. [관련 추천 : vue.js 영상 튜토리얼]

문제 배경

Hooks가 발생하는 이유는 무엇인가요? React에 관한 한 문제의 원래 배경은 다음과 같습니다.

상태 개념을 표현할 때 클래스가 가장 일반적인 조직 형태입니다. 클래스 자체에는 길고 복잡한 바인딩 관계로 인해 읽기가 어렵고, 방향이 항상 혼란스러운 등의 문제가 있습니다.

그뿐만 아니라 재사용 측면에서 렌더링 도구를 사용하는 패턴이나 높은; -order 컴포넌트 클래스는 매우 일반적이지만 과도한 중첩 관계로 이해될 수 있는 "pyramid of doom"(Pyramid of Doom)에 빠지기 쉽습니다.

Hooks는 이러한 문제를 해결하기 위해 존재합니다. 함수 호출을 사용하여 구성 요소의 상태를 정의합니다. 이러한 함수는 동시에 구성 및 재사용이 가능하며 상태 액세스 및 유지 관리도 계속 수행할 수 있습니다.

예: #ReactConf2018

의
• @dan_abramov 코드 그림 ①

• 그림 ②

그림 ①에서 그림 ②로의 변형이 있는데, 컴포넌트 코드를 재조합한 뒤 외부 재사용을 위해 함수 형태로 내보낸다는 의미입니다. 유지 관리 측면에서 Hooks는 공유 논리를 처리하고 잠재적으로 코드 크기를 줄이는 단일 기능적 방법을 제공합니다.

Vue Hooks

그렇다면 Vue에서 Hooks가 사용되는 이유는 무엇일까요? 결국 Vue에는 자주 사용되는 클래스가 없습니다. Vue에서는 동일한 구성 요소 재사용 논리를 해결하기 위해 믹스인을 사용합니다.

믹스인의 문제점은 무엇입니까? Hooks가 이 문제를 해결할 수 있을까요?

두 가지 주요 문제가 있습니다.

mixins는 상태를 전송할 수 없습니다.
로직의 소스는 명확하게 설명되지 않습니다.
Hooks는 이 두 가지 문제를 잘 해결할 수 있습니다. 전달 상태

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 hook
export 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% 50% -30px",
          cycle: {
            color: ["red", "purple", "teal"],
            rotationY(i) {
              return i * 50
            }
          }
        },
        ...

두 후크 사이에 값 전달:

<script>
import { logolettering } from "./../hooks/logolettering.js";
import { windowwidth } from "./../hooks/windowwidth.js";

export default {
  hooks() {
    logolettering(windowwidth());
  }
};
</script>

애플리케이션 전체에서 Hooks 조합 논리를 사용할 수 있습니다.

• 소스 지우기

In the s; rc/후크 폴더 , 구현을 위해 Hooks가 생성됩니다. 콘텐츠를 보기 위해 대화 상자를 열면 페이지가 일시 중지되고, 대화 상자를 본 후 페이지를 다시 스크롤할 수 있습니다.

애플리케이션에서 여러 번 사용될 가능성이 높습니다.

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

AppDetails.vue 구성 요소에서 호출하세요.

<script>
import { preventscroll } from "./../hooks/preventscroll.js";
...

export default {
  ...
  hooks() {
    preventscroll();
  }
}
</script>

Summary

원본 요약

Vue Hooks는 이미 Vue 2.x에서 사용할 수 있습니다. 하지만 아직은 실험단계이다. Hooks를 Vue 3에 통합할 계획이지만 여전히 React Hooks와 다릅니다.

이 기사 요약

Hooks가 Vue3에 적용되었습니다. 즉, 설정이 있지만 몇 가지 다른 점이 있습니다. React's Hooks에서 추천 도서: Vue3의 장점은 무엇인가요? (React Hook과 상세 비교)

주소 https://zhuanlan.zhihu.com/p/133819602

사실 원래 호출 프레임워크를 사용하지 않고 JS를 기본적으로 사용하더라도 디자인 의도는 이해합니다. , 유사한 재사용 로직을 만들어 보겠습니다. 완전한 함수를 함수로 구현하기 위한 논리를 캡슐화하면 함수 이름만 보면 함수의 내부 구현을 알 필요가 없습니다. 적어도 이것이다. 일반적으로 이것은 함수형 프로그래밍 디자인 아이디어와 일치합니다.

이 기사의 본문은 what-hooks-mean-for-vue(https://css-tricks)에서 번역되었습니다. .com/what-hooks-mean-for -vue/)

저자: Sarah Drasner

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Vue의 Hooks에 대해 자세히 알아보고 Vue의 중요성에 대해 이야기해 보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!