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>
    }
}

总结

源码体量不大，可以整体阅读下，了解并避免其他文档中没有涉及的潜在的坑点。