javascript - Vue.js 中的 class 和 staticClass 有什么区别吗？

Question

Vue.js 渲染函数中的 class 和 staticClass 有什么区别吗？使用Template Compilation ，我可以看到它根据传递给 HTML class 属性的内容输出不同的结果。

例如，当我传递单个字符串(例如 'foo')时，它会在 data 中输出 staticClass对象:

<div class="foo"></div>

编译为:

function anonymous() {
  with(this){return _c('div',{staticClass:"foo"})}
}

但是当我在 class 属性前面添加冒号 : (v-bind 的快捷方式)时，它会输出 class:

<div :class="'foo'"></div>

编译为:

function anonymous() {
  with(this){return _c('div',{class:'foo'})}
}

我很好奇 class 和 staticClass 之间的区别，以及在编写自己的渲染函数时应该使用哪一个。

我用谷歌搜索了一下，但没有找到任何线索。

提前致谢。

Answer 1

主要区别在于 staticClass 只能是字符串。 class 支持所有其他格式，例如数组和对象。

class 属性在很多方面都很特殊。对于大多数属性，您无法在同一元素上同时指定绑定(bind)版本和非绑定(bind)版本。在组合嵌套组件的属性时，还需要以不同的方式进行合并。所有这些合并都发生在这里:

https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/class.js

当模板被编译为渲染函数时，它们会使用许多未记录的功能来利用来自模板的额外知识。这就是一个这样的例子，它知道未绑定(bind)的 class 只能是字符串，因此它尝试通过将其单独存储为 staticClass 来保留该知识。

理论上，这样做有几个优点:

1. 操作值不需要担心class的数组和对象形式。
2. staticClass 永远不会改变，因此更新 DOM 时无需检查它。

然而，在实践中，第二次优化并未实现(模板编译器中有一些看起来相似的东西，但并不完全相同)。此外，从代码来看，我们并不完全清楚从操纵的 Angular 来看有很多收获。如果说有什么不同的话，那就是试图将这两个独立的概念保留到最后一刻，这只会让事情变得更加复杂。也许基准测试表明并非如此......

至于您应该在 render 函数中使用哪一个，只有 class 被记录下来，所以我会坚持这一点:

https://v2.vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth