VUE 计算属性 - 爱码网

1、示例代码

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div >
           {{reverseText}}
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    text:'123,456'
                },
                computed:{
                    reverseText:function(){
                        return this.text.split(',').reverse().join(',')
                    }
                }
            });
        </script>
    </body>

</html>

2、在大多数情况下，只会使用默认的getter方法读取计算属性，业务中很少用到setter方法。

3、与methods的区别

methods方法一样可以实现计算属性：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div >
            {{reverseText()}}
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    text: '123,456'
                },
                methods: {
                    reverseText: function() {
                        return this.text.split(',').reverse().join(',')
                    }
                }
            });
        </script>
    </body>

</html>

区别：使用计算属性还是methos取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。