Vue-计算属性的使用

1.计算属性：首先它是一个属性，所以使用方式跟其他的属性没什么，就是定义的时候不同

2.定义计算属性：写法上是一个函数，这个函数的返回值就是计算属性最终的值

3.定义和使用的时候注意点：

   1.计算属性必须定义在computed节点中

   2.计算属性定义的时候必须是一个function，还必须有返回值，这个返回值就是计算属性最终的值

  3.计算属性不能当作方法被调用，注意他是一个属性

计算属性的缓存问题：计算属性只要计算了一次，就会把结果缓存起来，以后多次使用计算属性，直接使用缓存的结果，只会计算一次，如果是计算属性依赖的属性发生改变，计算属性会重新计算一次，并且再次进行缓存

比如定义个翻转字符串案例 的计算属性(这个只能获取计算属性的值，不能设置计算属性的值)

computed:{

  reverseMsg (){   //对象方法的简写

return this.msg.split(").reverse().join(")

}

或者

computed: {
  total: function () {
    // 把this.list中所有的价格加起来
    let total = 0
    this.list.forEach(item => total += +item.price)
    return total
  },
  avg () {
    return (this.total / this.list.length).toFixed(2)
  }
},

使用计算属性 ：<p>{{  reversMsg }} </p> 或者  <input v-model:"reverseMsg">

计算属性的完整写法：

 1. 计算属性默认情况下只能获取，不能修改。
2. 计算属性的完整写法

  computed: {
    full() {},
    full: {
      get() {
        return this.first + ' ' + this.last
      },
      set(value) {

           //value是放回的计算属性值

      }
    }
  }