计算属性

计算属性允许用户定义复杂的数据转换逻辑。

什么是计算属性

计算属性用于承载一段数据转换的 JavaScript 脚本,并将return的结果作为计算属性对象的value属性。当计算属性依赖的数据发生变化时,计算属性将自动更新。

计算属性作用域

页面级计算属性

页面级计算属性仅能在对应页面中被使用,可访问对应页面的组件和数据以及全局的数据。

全局级计算属性

全局级计算属性可在所有页面中被使用,可访问全局的数据。

创建计算属性

可在左侧代码面板中创建当前页面或全局的计算属性,计算属性的设置包括计算逻辑和描述。

image

计算逻辑

计算逻辑是一段无副作用的 JavaScript 脚本,可实现复杂的数据转换逻辑,数据转换的结果通过return返回。

例如当前页面有两个输入框组件 input1 和 input2,需要将两者的值进行拼接后返回,则可以编写下图的计算逻辑。

image

描述

对计算属性进行注释说明。

使用计算属性

创建计算属性后,在相应作用域中的表达式和 JavaScript 脚本中即可通过计算属性的名称进行引用。

例如需要将文本组件 text1 的内容绑定为计算属性 compute1 的值,则可以按下图进行设置。

image

注意事项

  • 副作用:计算属性的 JavaScript 脚本中不可执行有副作用的操作。

  • 同步:计算属性是同步执行的。

  • 保存:计算属性需保存后生效。

  • 死循环:在保存计算属性前,应确认 JavaScript 脚本中不存在死循环,若在存在死循环的情况下保存将导致当前页签无响应,请通过浏览器关闭该页签并重新打开。

计算属性、变量与前端函数的区别

计算属性、变量与前端函数在使用场景、API 和代码限制等方面存在明显差异。

类别

使用场景

API

代码限制

同步/异步

计算属性

数据转换

仅可读取计算属性的值

无副作用的 JavaScript 脚本

同步

变量

数据临时存储与通信

可读取或修改变量的值

初始值为表达式

同步

前端函数

编写复杂业务逻辑

可执行前端函数或读取前端函数的属性

允许副作用的 JavaScript 脚本

异步