代码之家 › 专栏 › 技术社区 › Max P.

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

vue-component vuejs2 vue.js

Max P. · 技术社区 · 4 年前

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

前任:

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

第一种方式更小,更容易理解。但是性能呢?

1 回复 | 直到 4 年前

tony19 thanksd 2 年前

据官方消息 docs

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

和

我们可以将相同的函数定义为方法,而不是计算属性。对于最终结果,这两种方法确实完全相同。然而,不同之处在于 计算属性根据其反应依赖关系进行缓存

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

推荐文章

Goose · 如何更新Vue中的插槽。JS公司

7 年前

Scap · 访问其他组件中的vue组件数据时出现问题

7 年前

Andy · 从列表中删除vue组件始终删除列表中的最后一个元素

7 年前

Harshal Patil · 如何创建Vue。js插槽编程?

7 年前

kindisch · 无法解析动态导入的vue组件

7 年前

user1436631 · vueJS-当本地副本更新时,属性正在发生变化

7 年前

Willing Master · 如何配置选项以删除vue-tables-2中分页的第一个和最后一个按钮

7 年前

kshep92 · 将布尔属性传递给Vue组件的速记

7 年前

Bitwise · 将动态数据传递到路由器链路。

7 年前

user3699711 · 如何将数组中的元素添加到div元素中,其中id等于vue中的数组元素dealState号。js公司

7 年前