Vue3 render() 函数

Vue3 选项式 API Vue3 选项式 API

render() 函数是 Vue3 中一个非常重要的函数，它的作用是生成组件的虚拟 DOM，虚拟 DOM 是 Vue 用来描述真实 DOM 的轻量级 JavaScript 对象。

通过 render() 函数，Vue 能够高效地更新和渲染页面。

与模板的关系

在 Vue 中，我们通常使用模板（template）来定义组件的结构。模板最终会被编译为 render() 函数。因此，render() 函数是模板的底层实现。

使用场景

render() 函数通常用于以下场景：

  • 需要动态生成组件结构时。
  • 需要直接操作 DOM 时。
  • 在高性能要求的场景下，手动优化渲染逻辑。

render() 函数的基本语法

render() 函数接收一个参数，即 Vue 的 h 函数（也称为 createElement 函数），用于创建虚拟 DOM 节点。

实例

export default {
  render(h) {
    return h('div', { class: 'container' }, 'Hello, Vue3!');
  }
}

参数说明

  1. 第一个参数：标签名或组件名（字符串或组件对象）。
  2. 第二个参数：属性对象（可选），用于定义 DOM 属性、事件等。
  3. 第三个参数：子节点（可选），可以是字符串、数组或其他虚拟 DOM 节点。

render() 函数的进阶用法

动态生成子节点

render() 函数可以根据数据动态生成子节点。

实例

export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  },
  render(h) {
    return h('ul', this.items.map(item => h('li', item)));
  }
}

使用插槽

render() 函数可以通过 this.$slots 访问插槽内容。

实例

export default {
  render(h) {
    return h('div', [
      h('header', this.$slots.header),
      h('main', this.$slots.default),
      h('footer', this.$slots.footer)
    ]);
  }
}

渲染组件

render() 函数可以直接渲染其他组件。

实例

import MyComponent from './MyComponent.vue';

export default {
  render(h) {
    return h(MyComponent, { props: { message: 'Hello from parent!' } });
  }
}

render() 函数的优化

减少不必要的渲染

通过 render() 函数，可以手动控制组件的渲染逻辑，避免不必要的 DOM 更新。

实例

export default {
  data() {
    return {
      showMessage: true
    }
  },
  render(h) {
    return this.showMessage ? h('p', 'Hello!') : null;
  }
}

使用 Fragment

Vue3 支持 Fragment，可以在 render() 函数中返回多个根节点。

实例

export default {
  render(h) {
    return [h('div', 'Left'), h('div', 'Right')];
  }
}

Vue3 选项式 API Vue3 选项式 API