如何修改vue中的计算属性computed

计算属性的使用场景

<template>
  <div>
    {{todos.filter(v=>!v.done).length}} + {{todos.length}}
  </div>
</template>

从上述代码实现的方式上看，代码看起来很丑且性能不好，而且需要二次计算的数据，这在我们开发的需求中很常见。

此外，在模板里面写 JS，看起来代码也很乱。

Vue 针对这种情况，设计了一个功能，也就是计算属性。

我们看一下采用 Vue 的计算属性实现的，能够支持二次计算的上述功能的实现代码：

  <div>
    {{active}}  / {{all}}
  </div>
  
<script>
  computed:{
    active(){
      return this.todos.filter(v=>!v.done).length
    },
    all(){
      return this.todos.length
    }
  }
</script>

这两个函数返回的计算后的值，在模板里可以直接当做数据来用，这样把 JavaScript 的计算逻辑依然放在了 JavaScript 里，避免了过于臃肿的模板。

而且 computed 计算属性还内置了缓存功能，如果依赖数据没变化，多次使用计算属性会直接返回缓存结果，同我们直接写在模板里相比，性能也有了提升。

修改计算属性

计算属性不仅可以用来返回数据，有些时候我们也需要修改计算属性。

看一下这个场景：

全选框在勾选与取消勾选两个状态之间的切换，会把所有清单内的数据都同步勾选。
清单内的项目如果全部选中或者取消，也会修改全选框的状态。

这时候 computed 的配置就不能是函数了，要变成一个对象，分别实现 get 和 set 函数，get 就是之前的返回值，set 就是修改计算属性要执行的函数。

<div>
  全选<input type="checkbox" v-model="allDone">
  <span> {{active}}  / {{all}} </span>
</div>

<script>
computed:{
  active(){
    return this.todos.filter(v=>!v.done).length
  },
  all(){
    return this.todos.length
  },
  allDone: {
      get: function () {
        return this.active === 0
      },
      set: function (val) {
        this.todos.forEach(todo=>{
          todo.done = val
        });
      }
  }
}
</script>

现在就可以同时达到这两种效果了。