vue计算属性及函数的选择

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

<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>

<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>