类型：{ [key: string]: Function | { get: Function, set: Function } }
介绍：
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意，不应该使用箭头函数来定义计算属性函数 (例如 aDouble: () => this.a * 2)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

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

案例：

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

<div id="app">
    <input type="text" v-model="a">
    {{msg}}
    <!--根据输入框的内容 算出一个错误信息-->
    <!--当给A赋值的时候影响了 错误信心的改变 错误的-->
</div>

<script>
    let vm=new Vue ({    //如果写了set方法，并且val给了别人，那当前的a就不会被赋值结果了
        el:"#app",
        data:{a:""},
        computed:{   //默认调用get方法，必须有return   computed 不支持异步
          msg(){
              if(this.a.length<3){
                  return "少"
              }
              if(this.a.length>6){
                  return "多"
              }
              return "";
          }
        }
    })
</script>

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue中的computed方法详解