VUE 计算属性 Computed的简单用法

文章目录

        前言

                一、使用场景

                二、案例

        1.每次点击加上一个十以内的随机数

        2.反转字符串

        总结

---

---

前言

        计算属性将被混入到vue实例中，所有的getter和setter的this上下文自动的绑定为vue实例，computed适用于简单的运算，子模板中放入太多的逻辑会让模板过重且难以维护,如果为计算属性使用了箭头函数，则this不会指向这个组件的实例。

---

一、使用场景

        在开发过程中遇到数量庞大的数组需要频繁计算值的情况时适用，并且计算属性中的缓存可以避免多次执行。

二、案例

1.每次点击加上一个十以内的随机数

代码如下（示例）：

        




            添加一个元素

            {{getSum}}

        

    

2.反转字符串

代码如下（示例）：
 

        


        

            

            
{{rever}}

        


    

---

总结

computed是计算属性，当依赖数据不变时，它调用的是之前缓存下来的数据，这能大大提高程序的性能（methods没有缓存的概念）