黄轶《Vue.js技术内幕》笔记 --vue3普通元素vnode和组件的vnode有什么区别

小小小小宇
214 阅读3分钟

在 Vue 3 中，VNode（虚拟节点）是用来表示 DOM 元素或组件的抽象表示。VNode 是 Vue 的核心概念之一，理解普通元素 VNode 和组件 VNode 的区别对于掌握 Vue 的内部工作机制非常重要。

普通元素 VNode 和组件 VNode 的区别

  1. 普通元素 VNode：表示普通的 HTML 元素，如 <div>、<span> 等。
  2. 组件 VNode：表示 Vue 组件，无论是函数式组件还是类组件。

普通元素 VNode 的结构

普通元素 VNode 的结构通常包含以下属性：

  • type: 元素类型，例如 'div'、'span' 等。
  • props: 元素的属性，如 id、class 等。
  • children: 子节点，可以是文本节点或其他 VNode。

组件 VNode 的结构

组件 VNode 的结构通常包含以下属性：

  • type: 组件类型，指向组件的定义对象。
  • props: 传递给组件的属性。
  • children: 子节点，通常是插槽内容。
  • component: 组件实例。

示例代码

下面是一个详细的代码示例，展示如何在 Vue 3 中创建普通元素 VNode 和组件 VNode，并解释它们的区别。

创建普通元素 VNode

我们可以使用 Vue 3 的 h 函数来创建普通元素 VNode。

import { h, createApp } from 'vue';

const app = createApp({
    render() {
        // 创建一个 <div> 元素 VNode
        const divVNode = h('div', { id: 'my-div', class: 'container' }, 'Hello, World!');
        return divVNode;
    }
});

app.mount('#app');

在这个示例中，我们使用 h 函数创建了一个普通的 <div> 元素 VNode。这个 VNode 的结构如下：

{
    type: 'div',
    props: {
        id: 'my-div',
        class: 'container'
    },
    children: 'Hello, World!'
}

创建组件 VNode

我们可以使用 h 函数来创建组件 VNode。

import { h, createApp, defineComponent } from 'vue';

// 定义一个简单的组件
const MyComponent = defineComponent({
    props: ['msg'],
    template: `<div>{{ msg }}</div>`
});

const app = createApp({
    render() {
        // 创建一个组件 VNode
        const componentVNode = h(MyComponent, { msg: 'Hello, Vue!' });
        return componentVNode;
    }
});

app.mount('#app');

在这个示例中，我们定义了一个简单的组件 MyComponent，并使用 h 函数创建了一个组件 VNode。这个 VNode 的结构如下：

{
    type: MyComponent,
    props: {
        msg: 'Hello, Vue!'
    },
    children: null,
    component: null // 组件实例在挂载后会被填充
}

详细解释

  1. 普通元素 VNode:

    • type 是一个字符串，表示元素类型（例如 'div'）。
    • props 是一个对象，包含元素的属性（例如 id 和 class）。
    • children 可以是一个字符串（表示文本内容）或一个数组（表示子 VNode）。

  2. 组件 VNode:

    • type 是一个对象，表示组件的定义对象。
    • props 是一个对象，包含传递给组件的属性（例如 msg）。
    • children 通常是插槽内容，可以是一个函数或一个数组。
    • component 是组件实例，在组件挂载后会被填充。
  • 普通元素 VNode 的 type 是一个字符串，而组件 VNode 的 type 是一个对象。
  • 普通元素 VNode 的 children 可以是文本或子 VNode，而组件 VNode 的 children 通常是插槽内容。
  • 组件 VNode 具有 component 属性，用于存储组件实例，而普通元素 VNode 没有这个属性。

通过理解这些区别，可以更好地掌握 Vue 3 的内部工作机制，并在开发过程中更好地利用 VNode 来创建和管理 DOM 元素和组件。

avatar
文章
阅读
粉丝