vue 的计算属性computed自我理解

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

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

　　computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行展示出结果或者用作其他处理；

　　computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

<template>
<div>
  <ul>
    <li v-for="item in list" :key='item.name'>
      <span>{{item.name}}</span>
      <input type="text" v-model="item.age">
    </li>
    <li>
      <span>总数</span>
      <span>{{totalAge}}</span>
    </li>
  </ul>
  <ul>
    <li>
      <input type="text" v-model="setName">
      <input type="button" value="提交" @click="setFullName">
    </li>
    <li>
      <span>firstName</span>
      <input type="text" v-model="firstName">
    </li>
    <li>
      <span>lastName</span>
      <input type="text" v-model="lastName">
    </li>
    <li>
      <span>fullName</span>
      <span>{{fullName}}</span> <!-- 不建议使用v-model来改变fullName的值，会出现问题，本来computed就是计算的意思 -->
      <!-- <input type="text" v-model="lastName"> -->
    </li>
  </ul>
</div>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            name: 'nike',
            age: 25
          },
          {
            name: 'adidias',
            age: 30
          },
          {
            name: 'lining',
            age: 10
          }
        ],
        firstName: '',
        lastName: '',
        setName: ''
      }
    },
    methods:{
      setFullName(){
        this.fullName = this.setName;//通过函数设置fullName,不建议v-model来设置fullName
      }
    },
    computed:{
      // 仅读取
      totalAge(){
        let total = 0
        let me = this
        for (let i = 0; i < me.list.length; i++) {
          total += parseInt(me.list[i].age)
        }
        return total
      },
      // 读取和设置
      fullName: { //
        //读取
        get(){ //回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
          return this.firstName + ' : ' + this.lastName;
        },
        //设置
        set(val){ //监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
          //val就是fullName的最新属性值
          console.log(val)
          const names = val.split(' ');
          console.log(names)
          this.firstName = names[0];
          this.lastName = names[names.length-1];
        }
      }
    }
  }
</script>
<style>
ul{
  width: 400px;
  margin: 0 auto;
}
li{
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}
span{
  float: left;
  margin: 5px;
  padding: 0px 20px;
  width: 100px;
  text-align: right;
}
li span:nth-child(2){
  text-align: center;
}
input{
  height: 20px;
}
</style>