Vue.js中模板中的表达式与计算属性

在模板中使用什么更好：表达式还是计算属性

例：

...
数据：{
动态部分：“xxx”，
}

或

...
数据：{
动态部分：“xxx”，
},
计算：{
span_类（）{
返回“静态部分”+动态部分；
}
}

第一种方式更小，更容易理解。但性能如何呢？

根据官方数据

在模板中，表达式非常方便，但它们用于简单的操作。在模板中加入太多的逻辑会使它们臃肿，难以维护

及

我们可以定义与方法相同的函数，而不是计算属性。就最终结果而言，这两种方法确实完全相同。但是，不同之处在于，计算属性是基于它们的反应依赖关系进行缓存的

---

我发现，使用computed属性还可以将逻辑与内容分离，并帮助其他阅读您代码的人了解这些属性是基于其他属性计算的

在这种情况下，我会说：无论您喜欢哪一个，感觉哪一个最容易维护。调用函数并连接两个字符串的性能比影响用户感知性能的任何实际瓶颈都要小几个数量级。如果在一个页面上呈现1000次或异常频繁，那么这可能值得再次访问。在那之前：无论你喜欢什么，都是最容易维护的。

<span :class="'static_part' + dynamic_part"></span>
...
data: {
    dynamic_part: 'xxx',
}

<span :class="span_class"></span>
...
data: {
    dynamic_part: 'xxx',
},
computed: {
    span_class() {
        return 'static_part' + dynamic_part;
    }
}