关于css静态式样的咨询。

文档中有说style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

现有如下式样：

静态：  
<view :style="`width:${size}px;height:${size}px`" />  

动态  
<view :style="{width:(size)+'px',height:(size)+'px'}" />

是不是说尽量用下面动态？如果用了静态，最终也会解析为动态？

下面的方式：

<view :style="{'--size':size}">  
    <image src="xxxxx" class="pic" />  
</view>  

<style>  
.pic {  
    width: var(--size);  
    height: var(--size);  
}  
</style>

从性能上来说，哪个更好一点？

因这种情况比较多，所以想进一步了解一下。