Vue 计算属性 computed

当你的项目中有需要计算的，并且是需要依赖其他值动态计算的值，那么就到了使用计算属性的时候！

比如计算一个加法

<script>    
    computed: {
      sum: function (){
        return this.num1 + this.num2
      }
    },
    data() {
        return {
            num1: 1,
            num2: 2
        }
    }
</script>


<template>
    <div>{{ sum }}</div>
</template>

首先是computed的语法：

1.在computed中声明的值是不能和data中的值命名冲突的，因为使用是都是 this.‘key’

2.computed的写法就是 'key': function(){} ，他的值就是这个函数的返回值，并且在这个函数中也是可以调用this实例的

此时我们修改了num1 或 num2 ，sum会检测到数据变化，重新计算给sum赋值

// 在template中
<button @click="this.num1++">{{ num1 }}</button>
<button @click="this.num2++">{{ num2 }}</button>
<div>{{ sum }}</div>    

计算属性中，默认写的方法就是getter并且只有这一个函数，有需要的话可以将属性写成对象，分别写入getter 和 setter

<script>    
    computed: {
      double: {
        get：function() {
            return this.num * 2
        }
        set: function(value) {
            this.num = value / 2
        }
      }
    },
    data() {
        return {
            num: 10
        }
    }
</script>


<template>
    <input v-model="double">
    <input v-model="num">
</template>

这时修改 num 触发 get方法，修改double触发set方法

注：computed中如果写箭头函数是取不到this的，涉及到箭头函数this指向的问题