「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」。

计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或methods方法使用

计算属性的优点：

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

<div id="app">
  <div>R:<input type="text" v-model.number="r"></div>         <!-- .number是v-model的修饰符，将输入的值转化为数值类型 -->
  <div>G:<input type="text" v-model.number="g"></div>
  <div>B:<input type="text" v-model.number="b"></div>
  <hr>

  <!-- 这是用来显示颜色的盒子 -->
  <!-- :style是动态绑定样式，值是一个样式对象(目前只包含backgroundColor背景颜色) -->
  <!-- 绑定这个样式后，就可以控制div的背景颜色显示 -->
  <div class="box" :style="{backgroundColor:`rgb(${r}, ${g}, ${b})` }">
      {{ `rgb(${r}, ${g}, ${b})` }}
  </div>
	<button @click="show">按钮</button>
</div>

const vm = new Vue({
    el: '#app',
    data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
       
    },
    methods: {
        show(){
            console.log(`rgb(${this.r}, ${this.g}, ${this.b})`);
        }
    },

  // 这段代码里面，字符串rgb(${r}, ${g}, ${b})重复写了很多遍，导致代码冗余
  // 解决办法：使用计算属性，实现代码复用
})

使用计算属性优化上面的代码

<div id="app">
  <div>R:<input type="text" v-model.number="r"></div>         <!-- .number是v-model的修饰符，将输入的值转化为数值类型 -->
  <div>G:<input type="text" v-model.number="g"></div>
  <div>B:<input type="text" v-model.number="b"></div>
  <hr>
  <div class="box" :style="{backgroundColor:rgb}">         <!-- 使用计算属性中的rgb -->
    {{ rgb }}
  </div>
  <button @click="show">按钮</button>
</div>

const vm = new Vue({
	el: '#app',
  data: {
  	// 红色
    r: 0,
    // 绿色
    g: 0,
    // 蓝色
    b: 0               
  },
  methods: {
		show(){
      console.log(this.rgb);
    }
  },
  filters: {
  
  },
  watch: {
  
  },
  // 计算属性要写在computed节点下
  // 计算属性在定义的时候要定义成方法的格式
  computed: {
		// 定义相应的方法，一定得带return
    // 声明的是一个方法，但是在通过打印vm实例对象，发现这个方法在vm实例对象中是一个属性，所以使用这个计算属性生成的字符串时，要以vm实例中的属性来使用
    // 底层原理是调用了这个方法，然后将返回值放到vm实例中作为属性
    rgb(){
      return `rgb(${this.r}, ${this.g}, ${this.b})`
    }
    
    
    // 计算属性的完整写法
    // 当计算属性不需要被修改的时候，就使用上面的写法
    rgb: {
  		get(){
				return `rgb(${this.r}, ${this.g}, ${this.b})`
			},

			/* 一般情况下，计算属性是不修改的(可以修改，但不改)。因为计算属性通常是在页面上展示的，人们常修改的是依赖的数据，所以通常用不到setter */

      set(value){
				const arr = value.split(',')
				this.r = arr[0]
				this.g = arr[1]
				this.b = arr[2]
			}
  	}
  }
})

计算属性的原理：底层借助了Object.defineproperty方法提供的getter和setter

get函数的执行时机：

初次读取数据的时候执行一次，然后会将读取的结果缓存起来，下次读取的数据是缓存的数据
当依赖的数据放生变化的时候会再次执行

注意：

计算属性最终会是Vue实例对象vm的一个属性，可以直接使用

当计算属性被修改时，必须要写setter去响应修改，且setter中要写依赖的数据的变化代码 (即要拿到data里面的数据并修改)

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖

🤟🏼 冇事来学系--Vue2.0 计算属性

计算属性

计算属性的优点：

get函数的执行时机：

跋尾