> 웹 프론트엔드 > JS 튜토리얼 > Vue의 렌더링 방법에서 h는 무엇입니까?

Vue의 렌더링 방법에서 h는 무엇입니까?

Guanhui
풀어 주다: 2020-06-16 17:57:24
앞으로
3308명이 탐색했습니다.

Vue의 렌더링 방법에서 h는 무엇입니까?

한동안 vue를 사용했다면 최신 버전의 CLI에서 앱 파일의 렌더링 메서드를 접했을 수도 있습니다. > 기본값이며 main.js 파일에 있습니다: rendering 方法在你的app文件中 -- 在最新版本的 CLI 中它是一个默认值, 并且是在 main.js文件中:

new Vue({
 render: h => h(App)
}).$mount('#app')
로그인 후 복사

或者是,如果你使用了 render 方法(函数),可能会使用JSX:

Vue.component('jsx-example', {
  render (h) {
    return <p id="foo">bar</p>
  }
})
로그인 후 복사

或许你想知道,h 是用来干嘛的?它表示什么意思呢?  h  代表的是  hyperscript 。它是HTML的一部分,表示的是 超文本标记语言:当我们正在处理一个脚本的时候,在虚拟DOM节点中去使用它进行替换已成为一种惯例。这个定义同时也被运用到其他的框架文档中。详情点击这里 Cycle.js。

在这个问题上,Evan 描述到:

Hyperscript 它本身表示的是"生成HTML结构的脚本"

缩写为 h 是因为它更容易去输入。 他还在 Frontend Masters 上描述了这一点 他的高级 Vue 研讨会 。

真的,你可以认为它是 createElement 的缩写。 这将是一个长长的形式:

render: function (createElement) {
  return createElement(App);
}
로그인 후 복사

如果我们用 h

render: function (h) {
  return h(App);
}
로그인 후 복사
또는 render 메소드(함수)를 사용하는 경우 JSX를 사용할 수도 있습니다:

render: h => h (App)
로그인 후 복사
h가 무엇에 사용되는지 알고 싶으신가요? 그것은 무엇을 의미합니까? h

hyperscript

를 의미합니다. 이는 HTML의 일부이며 Hypertext Markup Language의 약자입니다. 스크립트 작업을 할 때 이를 사용하여 가상 DOM 노드를 대체하는 것이 관례가 되었습니다. 이 정의는 다른 프레임워크 문서에서도 사용됩니다. 자세한 내용은 여기 Cycle.js에 있습니다.
  • 이번 호에 대해 Evan은 다음과 같이 설명했습니다.

    Hyperscript 자체는 "HTML 구조를 생성하는 스크립트"를 의미합니다
  • 입력하기 쉽기 때문에 h로 축약됩니다. 그는 또한 Frontend Masters의 고급 Vue 워크숍에서 이에 대해 설명합니다.

    사실 createElement의 줄임말이라고 생각하시면 됩니다. 이것은 긴 형식이 됩니다.
render(h) {
  return h('p', {}, [...])
}
로그인 후 복사
  • h로 바꾸면 다음과 같이 할 수 있습니다.

    rrreee

    ... ES6를 사용하여 단축할 수 있습니다.
  • rrreeeVue에는 대부분의 버전 세 가지 매개변수가 필요합니다:

    rrreee

    첫 번째는 요소 유형입니다(여기서는 p로 표시됨).

    두 번째는 데이터 개체입니다. 여기에는 주로 props, attrs, dom props, class 및 style이 포함됩니다.

    세 번째는 하위 노드 세트입니다. 그런 다음 호출을 중첩하고 궁극적으로 가상 DOM 노드 트리를 반환합니다. 🎜🎜🎜🎜더 자세한 정보는 Vue 가이드에서 확인하실 수 있습니다. 🎜🎜이름 🎜 하이퍼스크립트 🎜는 일부 사람들에게 혼란을 줄 수 있습니다. 왜냐하면 하이퍼스크립트는 실제로 작은 생태계를 가지고 있는 라이브러리(요즘 업데이트되지 않음)의 이름이기 때문입니다. 이 경우 특정 구현에 대해 이야기하는 것이 아닙니다. 🎜🎜혼란스러우셨던 분들의 문제가 해결되길 바랍니다! 🎜🎜추천 튜토리얼: "🎜JS🎜"🎜

    위 내용은 Vue의 렌더링 방법에서 h는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    관련 라벨:
    원천:learnku.com
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿