小码哥的IT人生

首页 > JS > vue

Vue 3.0 渲染函数API 实例详解

vue 2022-05-07 17:09:37小码哥的IT人生shichen

#概览

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

以下是更改的简要总结:

  1. h 现在全局导入,而不是作为参数传递给渲染函数
  2. 渲染函数参数更改为在有状态组件和函数组件之间更加一致
  3. 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 的外部化:

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

#下一步

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

 

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024