计算属性允许用户定义复杂的数据转换逻辑。
什么是计算属性
计算属性用于承载一段数据转换的 JavaScript 脚本,并将return
的结果作为计算属性对象的value
属性。当计算属性依赖的数据发生变化时,计算属性将自动更新。
计算属性作用域
页面级计算属性
页面级计算属性仅能在对应页面中被使用,可访问对应页面的组件和数据以及全局的数据。
全局级计算属性
全局级计算属性可在所有页面中被使用,可访问全局的数据。
创建计算属性
可在左侧代码面板中创建当前页面或全局的计算属性,计算属性的设置包括计算逻辑和描述。
计算逻辑
计算逻辑是一段无副作用的 JavaScript 脚本,可实现复杂的数据转换逻辑,数据转换的结果通过return
返回。
例如当前页面有两个输入框组件 input1 和 input2,需要将两者的值进行拼接后返回,则可以编写下图的计算逻辑。
描述
对计算属性进行注释说明。
使用计算属性
创建计算属性后,在相应作用域中的表达式和 JavaScript 脚本中即可通过计算属性的名称进行引用。
例如需要将文本组件 text1 的内容绑定为计算属性 compute1 的值,则可以按下图进行设置。
注意事项
副作用:计算属性的 JavaScript 脚本中不可执行有副作用的操作。
同步:计算属性是同步执行的。
保存:计算属性需保存后生效。
死循环:在保存计算属性前,应确认 JavaScript 脚本中不存在死循环,若在存在死循环的情况下保存将导致当前页签无响应,请通过浏览器关闭该页签并重新打开。
计算属性、变量与前端函数的区别
计算属性、变量与前端函数在使用场景、API 和代码限制等方面存在明显差异。
类别 | 使用场景 | API | 代码限制 | 同步/异步 |
计算属性 | 数据转换 | 仅可读取计算属性的值 | 无副作用的 JavaScript 脚本 | 同步 |
变量 | 数据临时存储与通信 | 可读取或修改变量的值 | 初始值为表达式 | 同步 |
前端函数 | 编写复杂业务逻辑 | 可执行前端函数或读取前端函数的属性 | 允许副作用的 JavaScript 脚本 | 异步 |