计算属性

计算属性

计算属性，定义为“方法”，定义到 computed 节点之下

在使用计算属性的时候，当普通的属性使用即可，不需要 “（）”

好处：

1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

例：设定一个有大小的盒子，修改输入框中的rgb，会使得盒子跟着一起变色。

①未使用计算属性

style

.box {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
}

template

<div class="app">
    <!-- 数字部分 -->
    <div>
      <span>R：</span>
      <input type="text" v-model.number="r">
    </div>
    <div>
      <span>G：</span>
      <input type="text" v-model.number="g">
    </div>
    <div>
      <span>B：</span>
      <input type="text" v-model.number="b">
    </div>
    <hr>
    
    <!-- 图块 -->
    <div class="box" :style="{ backgroundColor: `rgb(${this.r}, ${this.g}, ${this.b})`}">
      <p>这里的RGB值是：{{ `rgb(${this.r}, ${this.g}, ${this.b})`}}</p>
      <button @click="show">单击按钮，在终端打印RGB的值</button>
    </div>
</div>

script

data: {
        r: 10,
        g: 111,
        b: 44
},
methods: {
        // 点击按钮，在终端显示
        show() {
          // 以下两行等效，
          // console.log(this.rgb)
          console.log(`rgb(${this.r}, ${this.g}, ${this.b})`)
        }
}

②改进为计算属性：

template更改

    <!-- 图块 -->
    <div class="box" :style="{ backgroundColor: rgb }">
      <p>这里的RGB值是：{{ rgb }}</p>
    </div>

script增加

computed: {
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }

很明显，使用计算属性后，大段的rgb(${this.r}, ${this.g}, ${this.b}变成了this.rgb，代码变得高效复用