VUE的computed计算属性——数组的反转、格式的修改、 数组的截取、VUEX获取state

定义

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

详细：

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

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

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

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

主要是不污染源数据的情况下我们进行的一系列操作

从VUEX获取state

  computed: {
    ...mapState(["friendusersname", "room_id"])
  },

数组的反转——应用

  computed: {
      newdataList:function(){
          return this.dataList.reverse()
      },
  }

<li class="content_li" v-for="(item,index) in newdataList" :key="item.id">
</li>

格式的修改

  computed: {
      newprize:function(){
          return `${this.prize}金币`
      },
  }

为什么要用这个格式修改而不使用{{}}插值呢？
主要还是提升用户体验

<span v-text="newprize"></span>

数组的截取

  computed: {
    NewuserArray: function() {
      return this.userArray.slice(0, 3);
    }
  }

      <div v-for="(item,index) in NewuserArray" :key="item.username + index" class="Avatar">
      </div>