• computed

    computed

    • 类型{ [key: string]: Function | { get: Function, set: Function } }

    • 详细

    计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

    注意如果你为一个计算属性使用了箭头函数,则 this 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。

    1. computed: {
    2. aDouble: vm => vm.a * 2
    3. }

    计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。

    • 示例
    1. var vm = new Vue({
    2. data: { a: 1 },
    3. computed: {
    4. // 仅读取
    5. aDouble: function () {
    6. return this.a * 2
    7. },
    8. // 读取和设置
    9. aPlus: {
    10. get: function () {
    11. return this.a + 1
    12. },
    13. set: function (v) {
    14. this.a = v - 1
    15. }
    16. }
    17. }
    18. })
    19. vm.aPlus // => 2
    20. vm.aPlus = 3
    21. vm.a // => 2
    22. vm.aDouble // => 4
    • 参考:计算属性