vue的computed计算属性

Mozzie晓风残月

于 2019-03-18 21:16:37 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42265852/article/details/88650291

vue 专栏收录该内容

42 篇文章

订阅专栏

博客介绍了Vue计算属性会混入实例，getter和setter的this自动绑定为实例，但用箭头函数时this不指向实例。计算属性结果会缓存，依赖的响应式属性变化才重新计算，若依赖在实例外则不会更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性将被混入到 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