vue开发：computed 计算属性

1.1 计算属性

1.概念

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。

2.语法

1. 声明在 computed 配置项中，一个计算属性对应一个函数
2. 使用起来和普通属性一样使用 {{ 计算属性名}}

computed: { //计算属性简单写法
     计算属性名 () {
        一段代码逻辑（计算逻辑）
     return 结果
   }
}

3.注意

1. computed配置项和data配置项是同级的
2. computed中的计算属性虽然是函数的写法，但他依然是个属性
3. computed中的计算属性不能和data中的属性同名
4. 使用computed中的计算属性和使用data中的属性是一样的用法
5. computed中计算属性内部的this依然指向的是Vue实例

   <!-- 模板中，使用计算属性，不能加小括号 -->
    <p>礼物总数：{{ total }} 个</p>
<script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 3 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        total() {
          // 基于现有数据,编写求值逻辑
          // 必须return 返回结果
          let x = 0
          this.list.forEach(item => {
            x += item.num
          })
          return x
          // return this.list.reduce((total, curr) => total +curr.num, 0)
        }
      }
    })
  </script>

1.2 computed计算属性 VS methods方法

1.computed计算属性
作用：封装了一段对于数据的处理，求得一个结果
语法：

1. 写在computed配置项中
2. 作为属性，直接使用
   • js中使用计算属性： this.计算属性
   • 模板中使用计算属性：{{计算属性}}

2.methods计算属性
作用：给Vue实例提供一个方法，调用以处理业务逻辑。
语法：

1. 写在methods配置项中
2. 作为方法调用
   • js中调用：this.方法名()
   • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

3.计算属性的优势

1. 缓存特性（提升性能）
   计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
   依赖项变化了，会自动重新计算 → 并再次缓存
2. methods没有缓存特性
3. 通过代码比较

4.总结
1.computed有缓存特性，methods没有缓存
2.当一个结果依赖其他多个值时，推荐使用计算属性
3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

1.3 计算属性的完整写法

1. 计算属性默认的简写，只能读取访问，不能 "修改"
2. 如果要 "修改" → 需要写计算属性的完整写法

computed: { // 计算属性复杂写法
  计算属性名: {
    get() {
      一段代码逻辑（计算逻辑）
      return 结果
    },
    set(修改的值) {
      一段代码逻辑（修改逻辑）
    }
  }
}

<div id="app">
    <span>姓：</span><input type="text" v-model="xing"><br><br>
    <span>名：</span><input type="text" v-model="ming"><br><br>
    <span>姓名：</span><input type="text" v-model.lazy="fullName"><br />
  </div>
<script>
    const app = new Vue({
      el: '#app',
      data: {
        xing: '代发费',
        ming: '本王'
      },
      computed: {
        fullName: {
          get() {
            // 当计算结果的时候，get就会执行
            return this.xing + '·' + this.ming
          },
          set(val) {
            // 直接修改计算属性的结果时，set就会执行。并且形参表示修改后的结果
            // console.log(val) // 修改后的计算属性
            let arr = val.split('·')
            this.xing = arr[0]
            this.ming = arr[1]
          }
        },
        // 计算属性2: {
        //   get () {
        //   },
        //   set () {
        //   }
        // }
      }
    })
  </script>