11、Vue计算属性computed

---

1、什么是计算属性

在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。
比如我们有num和price两个变量，我们需要得到numprice总价格，那么可以写成{{numprice}}，但是如果多个地方都需要显示完整的名称，我们就需要写多个{{num*price}}。
这个时候，我们可能会想到使用方法来定义函数，如下例所示：

 <div id="app">
        <div class="eg1" style="border: 1px solid blue;">
            <h3>商品数量：{{num}}</h3>
            <h3>商品单价：{{price}}</h3>
            <h4>商品总价：{{num*price}}</h4>
        </div>
        <div class="eg2" style="border: 1px solid red;">
            <h4>商品总价：{{getPrice()}}</h4>
            <h4>商品总价：{{getPrice()}}</h4>
            <h4>商品总价：{{getPrice()}}</h4>
            <h4>商品总价：{{getPrice()}}</h4>
        </div>
        
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num:10,  //数量
                price:12 //单价
            },
            methods:{
                getPrice(){
                    console.log(1)
                    return this.num * this.price
                }
            }

        })
    </script>

从上面的例子中，我们可以看到使用methods创建方法能够简化代码，但是这里还是有一个问题，那就是使用getPrice自定义函数时，每当使用{{getPrice()}}的时候，我们的getPrice()函数都会运行一次，可看到最后输出了4个1。这样存在一个问题，即当我们想要得到的num*price的值没发生任何变化的时候，每次调用getPrice()函数的时候都会运行一次函数，这样就显得比较多余，而且会消耗我们的性能，因此引进了计算属性。

2、计算属性

①：如何使用？
computed 和 data同级，计算属性写在computed中；写起来像方法；用起来像属 性。
②：特点（注意点）：
1）一定要有返回值。
2）可以使用data中的已知值。
3）只要跟计算属性相关的数据发生了变化，计算属性就会重新计算，不相关的属 性无论如何变化，都不会导致计算属性变化。
4）计算属性名不能和data中的数据重名（因为要使用data中的数据）
③：什么时候使用？
想要根据data中的已知值，得到一个新值，并且这个新值会随着相关数据的变化 而变化。

<div id="app">
            <h4>商品总价：{{getPrice}}</h4>
            <h4>商品总价：{{getPrice}}</h4>
            <h4>商品总价：{{getPrice}}</h4>
            <h4>商品总价：{{getPrice}}</h4>
        
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num:10,  //数量
                price:12 //单价
            },
            computed:{
                getPrice(){
                    console.log(1)
                    return this.num*this.price
                }
            }
        })
    </script>

我们可以看到此时调用getPrice的时候它只运行了一次，在它的值未发生任何变化的时候，调用函数getPrice来自它的缓存，因此不会再运行该函数，这样能达到节省消耗性能的效果。还要注意一点，使用getPrice的时候，和方法不同的是，它在调用的时候直接写即可，不需要和方法methods一样使用getPrice()。

3、计算属性的set和get

computed计算属性中包含了set和get两个方法（回调函数）。
get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值。
set回调函数:监视当前属性值发生改变时调用,更新相关的属性值。


每个计算属性都包含一个getter和setter,在上个例子中，我们只是用getter来读取。在某些情况下我们也可以提供一个setter方法（不常用）。

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，否则就是多次调用，但只会计算第一次，其他次调用的计算结果采用缓存的结果。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。