您的当前位置:首页>全部文章>文章详情

Vue3中h函数

发表于:2024-06-24 21:57:37浏览:195次TAG: #Vue

Vue3认识h函数

Vue推荐在绝大数情况下使用模板来创建你的HTML,然后一些特殊的场景,你真的需要JavaScript的完全编程的能力,这个时
候你可以使用 渲染函数 ,它比模板更接近编译器;

  • 前面我们讲解过VNode和VDOM的概念:
    1. Vue在生成真实的DOM之前,会将我们的节点转换成VNode,而VNode组合在一起形成一颗树结构,就是虚拟DOM
      (VDOM);
    2. 事实上,我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode;
    3. 那么,如果你想充分的利用JavaScript的编程能力,我们可以自己来编写 createVNode 函数,生成对应的VNode;
  • 那么我们应该怎么来做呢?使用 h()函数:
    1. h() 函数是一个用于创建 vnode 的一个函数;
    2. 其实更准备的命名是 createVNode() 函数,但是为了简便在Vue将之简化为 h() 函数;

h()函数 如何使用呢?

  • h()函数 如何使用呢?它接受三个参数:
h("button", { onClick: increment }, "+1")

// button:标签名
// { onClick: increment } 标签里的属性
// "+1" 标签里的文本
  • 注意事项
    1. 如果没有props,那么通常可以将children作为第二个参数传入;
    2. 如果会产生歧义,可以将null作为第二个参数传入,将children作为第三个参数传

h函数的基本使用

  • h函数可以在两个地方使用:
    1. render函数选项中;
    2. setup函数选项中(setup本身需要是一个函数类型,函数再返回h函数创建的VNode);
import { h } from 'vue'

export default {
    render(){
        return h('div',{class:"app"},"Hello App")
    }
}

h函数计数器案例

options-Api中

<script>
import { h } from 'vue';
export default{
  data(){
    return {
      counter:0
    }
  },
  render(){
    return h("div",{className:"app"},[
      h("h2",null,`当前计数:${this.counter}`),
      h("button",{ onClick: this.increment},"+1"),
      h("button",{ onClick: this.decrement},"-1"),
    ])
  },
  methods:{
    increment(){
      this.counter++
    },
    decrement(){
      this.counter--
    }
  }
}
</script>

setup函数中使用

<script>
  import { h, ref } from 'vue'

  export default {
    setup() {
      const counter = ref(0)

      const increment = () => {
        counter.value++
      }
      const decrement = () => {
        counter.value--
      }

      return () => h("div", { className: "app" }, [
        h("h2", null, `当前计数: ${counter.value}`),
        h("button", { onClick: increment }, "+1"),
        h("button", { onClick: decrement }, "-1"),
        h(Home)
      ])
    }
  }
</script>

Composition-Api 中

<template>
  <render />  
  <h2>内容</h2>
</template>

<script setup>
  import {ref,h} from 'vue';
  import Home from "./Home.vue";

  const counter = ref(0)

  const increment = () =>{
    counter.value++
  }
  const decrement = () =>{
    counter.value--
  }

  const render = () => h("div",{className:"app"},[
    h("h2",null,`当前计数:${counter.value}`),
    h("button",{ onClick:increment },"+1"),
    h("button",{onClick:decrement},"-1"),
    h(Home) // 引入组件
  ])
</script>

注意:在setup中需要

实际开发中我们基本不用render函数,如果依然想使用JavaScript的方式渲染,我们一般用JSX来编写逻辑

感谢大家观看,我们下次见

腾讯云采购季云服务器一折促销