computed 计算属性

按照method写 this.name()，按照data去用。this.name，

  <script>
    var vue = new Vue({
      el: '#app',
      data: {
        firstName: '',
        lastName: '',
        fullName: ''
      },
      methods: {
        handlerSumName() {
          console.log(this.sumName)
        }
      },
      computed: {
        // 计算属性。在computed中，可以定义一些 属性 ，这些属性叫做计算属性、
		//计算属性的本质就是一个方法，但是，当我们使用的时候，是将其视为属性去用的。
        // 简单说就是一句话，按照method写，按照data去用。this.name，this.name()

        // 注意：计算属性调用的时候，一定不要加()，它就是个属性，用法和data一模一样。
        // 注意：只要计算属性中使用到的所有data中的属性发生了变化，就会立即去重新计算属性的值。
		
        // 注意：计算属性的结果会被缓存起来，方便下次直接调用，
		// 如果计算属性中用到的所有的data都没有发生变化，就不会对计算属性重新求值。
        sumName() {
          console.log('计算属性执行了')
          return this.firstName + this.lastName
        }
      }
    })

  </script>

---

computed 细分 get(). set()

  <script>
    var vue = new Vue({
      el: '#app',
      data: {
        num1: 0,
        num2: 0,
      },
      methods: {
      },
      computed: {
        // 计算属性的get和set方法
        sumNumber: {
          get() { // 用于获取计算属性值的时候调用get方法
            return parseInt(this.num1) * 0.8 + parseInt(this.num2) * 0.2
          },
          set(val) { // 当修改了计算属性值的时候调用set方法
            this.num1 = parseInt(val) * 0.8
            this.num2 = parseInt(val) * 0.2
          }
        }
      }
    })

  </script>