vue计算属性

劉溜溜 2022-06-03 我要评论

一、计算属性

使用场景

从已有的数据A中计算等到的新的数据B，使用计算属性。

如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。

定义格式

在vue实例中，补充computed配置项

普通写法

{
    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名1 () {
            // 对依赖的数据进行处理，且进行return
            return
        }，
        计算属性名2 () {
            // 对依赖的数据进行处理，且进行return
            return
        }
    }
}

computed是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。

属性名称： 计算属性的名称
属性的值：计算属性的素材函数
- 对需要依赖的数据，进行逻辑上的处理
- 处理完毕后，需要return出去，返回的值就是计算属性的值

使用格式

在两个地方使用：

模板
- 用插值表达式 {{计算属性名}}
- 用其它指令
在实例内
- this.计算属性名

示例 —— 数组求和

<template>
  <div id="app">
    <p>求和:{{ sum1 }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [1,2,3,4]
    }
  },
  computed: {
    sum1(){
      // 对依赖的数据进行处理，且进行return
      return this.arr.reduce((sum, item)=>sum + item, 0)
    }
  }
}
</script>

在模板中使用计算属性，和使用data的方式是一样的。

虽然在计算属性中声明的是函数，但是在模板是使用，当做的数据来使用。不需要加括号。

小结：

什么时间用：需要对数据进行复杂的逻辑加工，产生新的数据时。
定义： 就是一个特殊的配置项computed。其中有多个函数。
使用：计算属性的使用方式与data中的数据项一致；
计算属性-计算：这个值是对原数据进行计算之后得到的新的数据
计算属性-属性：它的使用方法与原数据一样。this.计算属性名,{{计算属性名}}
执行的时机：如果计算属性中依赖的数据项变化时，它会自动调用。

computed有缓存

示例：

<template>
  <div id="app">
    <p>求和:{{ sum1 }}</p>
    <p>求和:{{ sum1 }}</p>
    <p>求和:{{ sum1 }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [1,2,3,4]
    }
  },
  computed: {
    sum1(){
      // 求arr的和，并返回
      // 如果arr变化了，计算属性会重新计算
      console.log('计算属性被调用了')
      return this.arr.reduce((sum, item)=>sum + item, 0)
    }
  }
}
</script>

结果：