函数式组件中的class与style处理

引言：什么是函数式组件
没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。在这样的场景下，我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。

一个函数式组件就像这样：

Vue.component('my-component', {
functional: true,
// Props 是可选的
props: {
// ...
},
// 为了弥补缺少的实例
// 提供第二个参数作为上下文
render: function (createElement, context) {
// ...
}
})

1. 函数式组件的class和style的数据在哪里？
在context对象的data属性中。

2. class和style的数据在context.data中是如何表现的？
它们以一下形式进行表现。

staticClass?: string;
class?: any;
staticStyle?: { [key: string]: any };
style?: string | object[] | object;

3. staticClass和class、staticStyle和style的使用场景
我们在使用组件的时候class属性和style属性有以下使用情况。

<my-component 
class="my-component"
:class="{'active':true}"
style="100%;"
:style="{height: '200px'}" >
</my-component>

此时context.data内的数据如下：

{
staticClass: "my-component",
class: {active: true},
staticStyle: { "100%"},
style: {height: "200px"}
}

从上面可以发现：
context.data中的staticClass、staticStyle对应DOM元素上的原生class、style属性。
context.data中的class、style对应属性DOM元素上绑定的v-bind:class、v-bind:style。

其中staticStyle为什么会转换为对象，是因为Vue调了parseStyleText方法。
————————————————
版权声明：本文为CSDN博主「ljw1412」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ljw1412/article/details/106144794/