学习Vue3.x 新特性-渲染函数API(非兼容)

xn213
830 阅读2分钟

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

前言

记录积累学习 Vue3 及源码! 之前有几篇文章有作 Vue3的一些变更学习总结的开始, 请直接转到文末Vue3 学习总结目录: ; 本文继续记录 Vue3.x 新特性的学习 渲染函数 API(非兼容)

Vue3.x 新特性学习-渲染函数

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

Vue2.x 在的渲染函数

先来看一下在 Vue2.x 中作为新手直接看代码会一头雾水的书写方法: 这是写的什么东西??

columns: [
  {
    title: '创建人',
    key: 'operator',
    minWidth: 70,
  },
  {
    title: '创建时间',
    key: 'create_time',
    minWidth: 120,
    render: (h, params) => {
      return h('div', this.formatDate(params.row.create_time)) // ??
    },
  },
]
/// ...

/// 格式化时间戳为日期的方法
formatDate(value) {
  let date = new Date(value);
  let y = date.getFullYear();
  /// ...
  return y + '/' + MM + '/' + d + ' ' + h + ':' + m;
},

上面代码中的 render()方法, 中的 **h**就是关键点啦! 那这个 h 到底是什么意思呢? 在 Vue2.x 或许需要看文档, 进而还需要看源码才能理解其中的意思.

Vue3 中的 渲染函数 API - h

而在 Vue3 中 这个 API 已经单独分离出来了, 可以使用 import 引入: h 函数现在是全局导入的，而不是作为参数自动传递。

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

export default {
  render() {
    return h('div')
  },
}

Vue3 学习实战的几篇小总结:

参考文档:

源码 & 文档

avatar
文章
阅读
粉丝