vue渲染函数实战 Vue 3.0 渲染函数API

Vue渲染函数实战是一种非常有用的技术，它可以帮助开发者快速创建动态的Web应用程序。Vue渲染函数是一种特殊的JavaScript函数，它可以将一个对象转换为HTML文本，并将其插入到页面中。Vue渲染函数可以使用JavaScript语法来定义和处理数据，并将其转换为HTML文本。

Vue渲染函数的使用方法很简单，开发者只需要在Vue实例中声明一个render函数即可。render函数的作用是将传入的对象转化为HTML文本，并将其插入到页面中。render函数的语法如下所示：

上述代码中，render函数会返回一个div标签，内部包含“Hello World”字样。当然，开发者也可以使用JavaScript语法来处理传入的对象，然后将处理后的对象输出到HTML文本中。例如：

上述代码中，render函数会返回一个div标签，内部包含data.name和data.age字样。此外，开发者还可以使用Vue内置的v-for、v-if、v-show、v-bind、v-on等语法来处理传入的对象并生成HTML文本。

总之，Vue渲染函数是一种非常有用的工具，它能够帮助开发者快速创建动态Web应用程序。此外，开发者还可以使用JavaScript语法来处理传入的对象并生成HTML文本。因此，Vue渲染函数是快速创建Web应用程序不可或缺的重要工具之一。

#概览

此更改不会影响 <template> 用户。

以下是更改的简要总结：

h 现在全局导入，而不是作为参数传递给渲染函数
渲染函数参数更改为在有状态组件和函数组件之间更加一致
vnode 现在有一个扁平的 prop 结构

更多信息，请继续阅读！

#Render 函数参数

#2.x 语法

在 2.x 中，e render 函数将自动接收 h 函数 (它是 createElement 的常规别名) 作为参数：

// Vue 2 渲染函数示例
export default {
  render(h) {
    return h("div")
  }
}

#3.x 语法

在 3.x 中，h 现在是全局导入的，而不是作为参数自动传递。

// Vue 3 渲染函数示例
import { h } from "vue"


export default {
  render() {
    return h("div")
  }
}

#渲染函数签名更改

#2.x 语法

在 2.x 中，render 函数自动接收诸如 h 之类的参数。

// Vue 2 渲染函数示例
export default {
  render(h) {
    return h("div")
  }
}

#3.x 语法

在 3.x 中，由于 render 函数不再接收任何参数，它将主要用于 setup() 函数内部。这还有一个好处：可以访问作用域中声明的响应式状态和函数，以及传递给 setup() 的参数。

import { h, reactive } from "vue"


export default {
  setup(props, { slots, attrs, emit }) {
    const state = reactive({
      count: 0
    })


    function increment() {
      state.count++
    }


    // 返回render函数
    return () =>
      h(
        "div",
        {
          onClick: increment
        },
        state.count
      )
  }
}

有关 setup() 如何工作的详细信息，参考组合式 API 指南。

#VNode Props 格式化

#2.x 语法

在 2.x 中，domProps 包含 VNode props 中的嵌套列表：

// 2.x
{
  class: ["button", "is-outlined"],
  style: { color: "#34495E" },
  attrs: { id: "submit" },
  domProps: { innerHTML: "" },
  on: { click: submitForm },
  key: "submit-button"
}

#3.x 语法

在 3.x 中，整个 VNode props 结构是扁平的，使用上面的例子，下面是它现在的样子

// 3.x 语法
{
  class: ["button", "is-outlined"],
  style: { color: "#34495E" },
  id: "submit",
  innerHTML: "",
  onClick: submitForm,
  key: "submit-button"
}

#迁移策略

#工具库作者

全局导入 h 意味着任何包含 Vue 组件的库都将在某处包含 import { h } from "vue"，因此，这会带来一些开销，因为它需要库作者在其构建设置中正确配置 Vue 的外部化：

Vue 不应绑定到库中
对于模块构建，导入应该保持独立，由最终用户绑定器处理
对于 UMD/browser 版本，它应该首先尝试全局 Vue.h，然后回退以请求调用

#下一步

见 Render 函数指南更详细的文档！

文章详情

vue渲染函数实战 Vue 3.0 渲染函数API