Computed
属性是Vue
中的一个计算属性,是一种基于其它属性值计算而来的属性值,具有缓存机制,在依赖的属性值发生变化时会重新计算。
使用computed
属性可以避免在模板中书写过多的计算逻辑,提高代码可读性和维护性。
下面是一个计算属性的示例:
单价: ¥{{ price }}
个总价: ¥{{ totalPrice }}
计算属性是有缓存的, 当我们多次使用计算属性时, 计算属性中的运算只会执行一次。如下图:
{{ fullName }}{{ fullName }}{{ fullName }}{{ fullName }}{{ fullName }}{{ fullName }}{{ getFullName() }}{{ getFullName() }}{{ getFullName() }}{{ getFullName() }}{{ getFullName() }}
计算属性默认是只读的,也就是只用到getter
。当你尝试修改一个计算属性时,你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性,你可以通过同时提供 getter
和 setter
来创建:
需要注意的是,computed
属性必须返回一个值,不能有副作用,如修改数据或触发异步操作等。如果需要有副作用的计算,可以使用watch
属性。