Vue-源码阅读八-JSX

介绍

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

渲染函数在某些场景下，编写时没有模板直观、简单。

这就是为什么会有一个 Babel 插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。

起因

在官方给的使用文档中，只是简单的介绍了一些基础用法，使用过程中遇到如下问题：

ElementUI 中 Form 组件有一个叫做 model 的 props，通常会这么写 JSX ：

{    render() {        <el-form model={{ }}>            ...        </el-form>    }}

通过 Vue DevTools，可以查看到 Form 组件绑定的 model 值为 undefined。

分析

查看源码时，可以发现 model 是 root attributes，被当做 attributes 而不是 props

const rootAttributes = ['staticClass', 'class', 'style', 'key', 'ref', 'refInFor', 'slot', 'scopedSlots', 'model']// ...if (rootAttributes.includes(name)) {    attributes[name] = value} else {    }

解决方案

设计组件 props 时，应该避免使用 rootAttributes 包含的值。如果已经那么设计，可以这样处理：

{    render() {        <el-form props={{ model: { } }}>            ...        </el-form>    }}