阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js computed

      computed

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

      详细

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

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

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

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

      示例

      var vm = new Vue({
        data: { a: 1 },
        computed: {
          // 仅读取
          aDouble: function () {
            return this.a * 2
          },
          // 读取和设置
          aPlus: {
            get: function () {
              return this.a + 1
            },
            set: function (v) {
              this.a = v - 1
            }
          }
        }
      })
      vm.aPlus   // => 2
      vm.aPlus = 3
      vm.a       // => 2
      vm.aDouble // => 4
      

      参考

      计算属性

      目录
      目录