【Vue3】h、ref：vue3的两个新特性(重要)-h和ref

h、ref：vue3的两个新特性-重要

在 Vue 3 中，h 和 ref 是两个非常重要的函数，它们在框架的运行和组件的创建中扮演着关键角色。在 Vue 3 中，这两个函数是构建现代 Vue 应用的基础，特别是在使用组合式 API 时。

h 函数（ createElement）

h 函数，全称 createElement，是 Vue 3 中用于创建虚拟 DOM 节点的函数。它是一个通用的 API，允许以编程方式创建任何类型的组件或元素，而不仅仅是 HTML 元素。h 函数是 Vue 的渲染函数 API 的一部分，它使得组件的创建更加灵活和强大。

用法：

import { h } from 'vue';

const MyComponent = {
  render() {
    return h('div', 'Hello, World!');
  }
};

// 或者创建一个组件实例
const MyComponentInstance = h(MyComponent);

参数：

type：可以是一个 HTML 标签名（如 'div'）、一个组件对象，或者一个异步组件。
props（可选）：一个对象，包含要传递给组件的属性。
children（可选）：可以是字符串、数组，或者另一个通过 h 创建的虚拟节点。
normalizer（可选）：一个函数，用于在创建组件时进行额外的处理。

ref 函数

ref 函数用于创建一个响应式的引用对象。这个对象的 .value 属性被 Vue 的响应式系统所跟踪，当 .value 发生变化时，所有依赖于这个值的组件都会自动更新。

用法：

import { ref } from 'vue';

const count = ref(0);

// 访问响应式引用的值
console.log(count.value); // 输出 0

// 修改响应式引用的值
count.value++;

特点：

ref 创建的是一个包含单个值的响应式引用。
访问和修改 ref 对象的值时，需要通过 .value 属性。
ref 常用于 Vue 3 的组合式 API 中，用于定义组件的响应式状态。

总结

h 函数是 Vue 3 中用于创建虚拟 DOM 节点的通用方法，它提供了一种灵活的方式来构建组件和元素。
ref 函数用于创建响应式的引用对象，使得数据的变化能够被 Vue 的响应式系统所跟踪，并触发视图的更新。