computed 计算属性

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

语法：

① 声明在 computed 配置项中，一个计算属性对应一个函数

② 使用起来和普通属性一样使用 {{ 计算属性名 }}

计算属性 → 可以将一段 求值的代码 进行封装

例：计算礼物的总数

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ totalCount }} 个</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 100 },
          { id: 2, name: '玩具', num: 22 },
          { id: 3, name: '铅笔', num: 57 },
        ]
      },
      computed: {
        totalCount() {
          // 基于现有数据，编写求值逻辑
          // 计算属性函数内部，可以通过 this 访问到实例
          // 计算属性函数的返回值，会作为计算属性的值
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>

computed 计算属性 VS methods方法

computed 计算属性：

作用：封装了一段对于数据的处理，求得一个结果。

语法：

① 写在 computed 配置项中

② 作为属性，直接使用 → this.计算属性 {{ 计算属性 }}

methods 方法：

作用：给实例提供一个方法，调用以处理业务逻辑。

语法：

① 写在 methods 配置项中

② 作为方法，需要调用 → this.方法名( ) {{ 方法名() }} @事件名="方法名"

缓存特性（提升性能）：

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

依赖项变化了，会自动重新计算 → 并再次缓存

计算属性的完整写法

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

  <div id="app">
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    <p>姓名：{{ firstName+lastName }}</p>
    <button @click="changeName">修改姓名</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '张',
        lastName: '三'
      },
      computed: {
        // 完整写法：获取 + 设置
        fullName: {
          get() {
            return this.firstName + this.lastName
          },
          set() {
            this.firstName = value.slice(0, 1),
              this.lastName = value.slice(1)
          }
        }
      },
      methods: {
        changeName() {
          // 修改数据
          this.fullName = '李四'
        }
      }
    })
  </script>