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는 이러한 문제를 해결하기 위해 존재합니다. 함수 호출을 사용하여 구성 요소의 상태를 정의합니다. 이러한 함수는 동시에 구성 및 재사용이 가능하며 상태 액세스 및 유지 관리도 계속 수행할 수 있습니다.
그림 ①에서 그림 ②로의 변형이 있는데, 컴포넌트 코드를 재조합한 뒤 외부 재사용을 위해 함수 형태로 내보낸다는 의미입니다. 유지 관리 측면에서 Hooks는 공유 논리를 처리하고 잠재적으로 코드 크기를 줄이는 단일 기능적 방법을 제공합니다.
Vue Hooks믹스인의 문제점은 무엇입니까? Hooks가 이 문제를 해결할 수 있을까요?
두 가지 주요 문제가 있습니다.
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
}
}// 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>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;
});
}<script>
import { preventscroll } from "./../hooks/preventscroll.js";
...
export default {
...
hooks() {
preventscroll();
}
}
</script>원본 요약
Vue Hooks는 이미 Vue 2.x에서 사용할 수 있습니다. 하지만 아직은 실험단계이다. Hooks를 Vue 3에 통합할 계획이지만 여전히 React Hooks와 다릅니다.Hooks가 Vue3에 적용되었습니다. 즉, 설정이 있지만 몇 가지 다른 점이 있습니다. React's Hooks에서 추천 도서: Vue3의 장점은 무엇인가요? (React Hook과 상세 비교)
이 기사의 본문은 what-hooks-mean-for-vue(https://css-tricks)에서 번역되었습니다. .com/what-hooks-mean-for -vue/)저자: Sarah Drasner
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 Vue의 Hooks에 대해 자세히 알아보고 Vue의 중요성에 대해 이야기해 보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
