Vue3学习心得

h()函数

引入h函数

import { h } from "vue";

其中h函数的作用，创建一个生成一个VNode虚拟节点，只生成一个，可以是一个树形结构化的VNode，使用方式和参数介绍如下

第一个参数

必传，可以是 html标签名，一个组件、一个异步的组件或者是函数组件

第二个参数

是一个对象，可选的，与attribute、prop和事件相对应的对象

第三个参数

可以是字符串、数组或者是一个对象，可以是VNode数组，作为其内容或者子节点。

import { 
    h,
} from "vue";

// 一个简单的虚拟节点
let vNode = h("div", null, [
    h("h2", null, "计数器"),
    h("h3", null, `计数${this.counter}`),
    h("button", { onClick: () => this.counter++ },"点一下"),
]);

组件中的render()函数

作为组件的一个属性，负责返回一个VNode或者其他自己按照逻辑使用h函数创建想要的VNode。
render函数所接收的参数是一个上下文对象（ctx），这个上下文对象包含了当前组件实例的所有属性和方法。据此数据就可以按照逻辑返回组件想要的VNode了。

（注意一些自动化打包的工具可能会自动转换HTML替换render函数）

import { 
    h,
} from "vue";

export default {
    name:'Info',
    components: {
    },
    render(ctx) {
        console.log(ctx);
        return h("h2", null, "Hello World");
    },
};

总结

通过render函数生成了VNode，其中如果遇到了组件那么照样都是返回VNode，render只负责组装好正确的VNode然后返回就行了，其他的功能就不用管了，比如说将VNode渲染转换成正确的元素加载到页面上，以及性能优化啥的就交给其他函数实现了。