vue关于h函数的简单认识

vue在绝大多数情况下都推荐使用模板来编写html结构,但是对于一些复杂场景下需要完全的JS编程能力，这个时候我们就可以使用渲染函数，它比模板更接近编译器

vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM（VDOM）

我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode

`h()`函数参数

参数一：一个html标签名，一个组件或者一个异步组件，或者函数式组件（必要）
参数二：与attr,prop 和事件相对应的对象（可选），不写的话最好用null占位
参数三：子VNode,使用h()函数构建，或者使用字符串获取文本VNode或者有插槽的对象（可选）

基本使用

h()函数可以在两个地方使用：

render 函数中
setup函数中

render函数中使用

render() {
    return h(
      "div",
      {
        class: "app",
      },
      [
        // 这里this是可以取到setup中的返回值的 
        h("h2", null, `当前计数: ${this.counter}`),
        h("button", {onclick:() => this.counter++}, "+1"),
        h("button", {onclick:() => this.counter--}, "-1"),
      ]
    );
  },

setup函数中使用

  setup() {
    const counter = ref(0);
    return () =>
      h(
        "div",
        {
          class: "app",
        },
        [
          // 这里this是可以取到setup中的返回值的
          h("h2", null, `当前计数: ${counter.value}`),
          h("button", { onclick: () => counter.value++ }, "+1"),
          h("button", { onclick: () => counter.value-- }, "-1"),
        ]
      );
  },

函数组件和插槽使用

引入使用HelloWorld组件，组件有一个默认插槽和一个具名插槽

  setup() {
    const read = shallowRef({name:"zhangsan"});
    setTimeout(() => {
      read.value.name = "lls";
      triggerRef(read);
      console.log(read.value)
    }, 5000)
    return () =>
      h(
       HelloWorld,
       null,
       {
         default:props => h("span", null, `${read.value.name} app传入到组件中的内容${props.name}`),
         usejsx: props => h(usejsx, null)
       }
      );
  },

HelloWorld组件：

  render() {
    return h("div", null, [
      h("h2", null,  "hello world"),[
        this.$slots.default ? this.$slots.default({name:"zhangsan"}):h("h2", null, "我是默认插槽"),
        this.$slots.usejsx()
      ]
      
  ]);
  }

其实从上述我们可以看出插槽其实就是一个函数的调用，也能解释解构插槽原理了

vue关于h函数的简单认识