博客
关于我
vue 基础之计算属性
阅读量:650 次
发布时间:2019-03-15

本文共 710 字,大约阅读时间需要 2 分钟。

Vue.js基础之计算属性

1. 反转字符串示例一

在模板 中使用计算属性我们可以轻松地实现字符串的反转操作。以下是一个简单的例子:

{{ message.split(" ").reverse().join("") }}

在这个示例中,我们直接在模板中使用了分割、逆序和重新连接字符串的操作。这种方法简洁直观,但需要注意,既然模板会被编译,你可能想在生产环境下避免在模板中直接使用 JavaScript 表达式。

2. 反转字符串示例二 - 使用计算属性

为了实现同样的效果,我们可以将反转操作转化为一个计算属性。计算属性会被 Vue.js 自动地转换为函数,可以高效地缓存其结果:

{{ reverseMessage }}

3. 计算属性与方法的区别

你可能已经想到了,无论是使用直接在模板中使用表达式,还是将其转化为计算属性,结束后的效果其实是一样的。但是,对于更复杂的逻辑来说,计算属性更值得选择。原因在于:

  • 响应式缓存:计算属性会根据其依赖关系(比如 this.message )自动缓存结果,只有当依赖发生变化时,才会重新计算。
  • 更高效:如果多次访问计算属性(某个引用的复杂表达式),会比直接使用函数调用更高效,因为它只在必要时才会重新执行。

当然,我们也需要通过 methods 维度定义函数来满足需要:

{{ reverseMessage() }}

总结

计算属性在 Vue.js 中提供了一种强大的方式,将逻辑移动到数据属性中,避免了模板中逻辑过多的问题。通过合理的使用计算属性,我们可以更专注于业务逻辑,提升代码的可维护性和效率。

转载地址:http://lxvmz.baihongyu.com/

你可能感兴趣的文章
Android中获取并设置屏幕亮度
查看>>
Windows抓包工具-Fiddler
查看>>
Swift中使用DispatchGroup分组管理异步任务
查看>>
21-JS中常见的函数
查看>>
Android多线程与双缓冲
查看>>
MVVM_Template
查看>>
栈上内存溢出漏洞利用之Return Address
查看>>
Bugku CTF web29(Web)
查看>>
网络+图片加载框架(英文版)
查看>>
扣非净利润连续三年亏损,四维图新如何熬过“转型阵痛期”?
查看>>
前台报Invalid Host/Origin Header错误
查看>>
Python imageio方法示例
查看>>
Possible missing firmware
查看>>
算法的学习方式
查看>>
JAVA BigInteger和BigDecimal类常用方式
查看>>
深度学习框架 各种模型下载集合 -- models list
查看>>
双层卷积神经网络--tf
查看>>
six.move 的作用
查看>>
错误:'BasicLSTMCell' object has no attribute '_kernel'
查看>>
Django认证系统
查看>>