vue3.0의 h 함수는 무엇입니까?

vue3.0에서 h 함수는 vue의 createElement 메소드입니다. 이 함수의 기능은 가상 DOM을 생성하고, DOM 변경 사항을 추적하고, 템플릿이 HTML로 렌더링되는 과정을 표시하는 것입니다.

이 기사의 운영 환경: Windows 10 시스템, Vue3 버전, DELL G3 컴퓨터.

vue3.0의 h 함수는 무엇인가요?

1. 함수

h 함수는 노드를 생성하는 것입니다. 이는 vue가 페이지에서 렌더링될 때 템플릿이 html로 렌더링되는 방식을 보여주는 프로세스를 구현할 수 있습니다. , 로더를 통해 템플릿으로 패키징됩니다. 문자열 접합이 렌더링되므로 h 함수도 문자열을 통해 HTML로 렌더링됩니다.

h 함수는 vue의 createElement 메소드입니다. 이 함수의 기능은 가상 돔을 생성하고 DOM을 추적하는 것입니다. 변경

두 번째, app.vue 추가 템플릿의 템플릿은 h 함수

app.vue

main.js

import { createApp, defineComponent, h } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
// defineComponent定义组件
// h创建节点, 可实现展示template如何渲染到html中得过程，因为vue渲染到页面上是通过loader打包成模板字符串拼接渲染得，所以 h 函数同样也是通过字符串渲染到html中
// 第一个参数 节点类型 p为dom原生节点，需要通过字符串"p"来标识
// 第二个参数 节点属性 p节点得属性
// 第三个参数 节点的孩子节点 内部节点(子内容)
// import App from './App.vue'

const img = require('./assets/logo.png') // eslint-disable-line
// 由于ts中不支持require所以需要取消校验，直接加注释方可
const App = defineComponent({
  render() {
    return h('p', { id: 'app' }, [
      h('img', {
        alt: 'vue.logo',
        src: img,
      }),
      h(HelloWorld, {
        msg: 'Welcome to Your Vue.js + TypeScript App',
        name: '李四',
        age: 15,
        sex: '男',
      }),
    ])
  },
})

3. h 함수 소스 코드

4. 비고

소스코드를 보면 알 수 있는데, h함수 사실은 createVNode이므로 h

대신 createVNode를 인용해도 됩니다.[관련 추천: "vue.js tutorial"]

위 내용은 vue3.0의 h 함수는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!