Vue(4)——计算属性

计算属性

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

语法：

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

computed:{

  计算属性名(){

    ...

    return 结果

  }

} 

完整写法为：

computed:{

  计算属性名:{

   get(){

      return 结果

    },

    set(修改的值){

    }

  }

} 

注：计算属性是有缓存的，一旦计算出来结果，就会立即缓存，下一次读取直接读缓存 

  <div id="app">
    姓：<input type="text" v-model="fir"> +
    名：<input type="text" v-model="las"> =
    <span>{{name}}</span>
    <br><br>
    <button @click="change">改名</button>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        fir: '刘',
        las: '备',
      },
      methods: {
        change() {
          this.name = '小明'
        }
      },
      computed: {
        name: {
          get() {
            return this.fir + this.las
          },
          //当name被修改时执行set
          set(value) {
            this.fir = value.slice(0, 1)
            this.las = value.slice(1)
          }
        }
      }
    })