Vue.js 计算属性

2019独角兽企业重金招聘Python工程师标准>>>

        模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会难以维护，而计算属性就是用于解决该问题的。

一、什么是计算属性

        在一个简单的 Vue 应用，在模板中双向绑定一些数据或表达式了。但是表达式如果过长，或逻辑更为复杂时，就会变得臃肿甚至难以阅读和维护，比如：

    <div>
        {{ text.split(',').reverse().join(',') }}
    </div>

        上面的表达式包含 3 个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性。上例可以用计算属性进行改写：

 <div>
        {{ reversedText }}
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                text: '123,456'
            },
            computed: {
                reversedText: function () {
                    // 这里的 this 指向的是当前的 Vue 实例
                    return this.text.split(',').reverse().join(',');
                }
            }
        })
    </script>

        所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。

二、计算属性用法

        在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。除了上述简单的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。以在购物车内两个包裹的物品总价威力展示：

        

 <div id="app">
        结算商品总价：{{ prices }}
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                package1: [
                    {
                        name: 'iPhoneX',
                        price: 18999,
                        count: 2
                    },
                    {
                        name: 'iPad',
                        price: 6666,
                        count: 1
                    }
                ],
                package2: [
                    {
                        name: 'apple',
                        price: 3,
                        count: 5
                    },
                    {
                        name: 'banana',
                        price: 2,
                        count: 10
                    }
                ]
            },
            computed: {
                prices: function () {
                    var prices = 0;
                    for (var i = 0; i < this.package1.length; i++) {
                        prices += this.package1[i].price * this.package1[i].count;
                    }
                    for (var i = 0; i < this.package2.length; i++) {
                        prices += this.package2[i].price * this.package2[i].count;
                    }
                    return prices;
                }
            }
        })
    </script>

        当 package1 或 package2 中的商品有任何变化，比如购买数量变化或增删商品时，计算属性 prices 就会自动更新，视图的总价也会自动变化。

        每一个计算属性都包含一个 getter 和 setter，上面的两个示例都是计算属性的默认用法，只是利用了 getter 来读取。在你需要时，也可以提供一个 setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter 函数，执行一些自定义的操作。例如：

        

   <div id="app">
        姓名：{{ fullName }}
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                firstName: 'Mark',
                lastName: 'Green'
            },
            computed: {
                fullName: {
                    // getter 用于读取
                    get: function () {
                        return this.firstName + ' ' + this.lastName;
                    },
                    // setter 写入时触发
                    set: function () {
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length - 1];
                    }
                }
            }
        });
    </script>

        当执行 app.fullName = 'Constantine Lee'；时，setter 就会调用，数据 firstName 和 lastName 都会相对更新，视图同样也会更新。

        绝大多数情况下，只会用默认的 getter 方法来读取一个计算属性，实际业务中很少用到 setter ，所以在声明一个计算属性时，可以直接使用默认的写法，不必将 getter 和 setter 都声明。

        计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称 class 和内置样式 style 。当使用组件时，计算属性也经常用来动态传递 props 。

        计算属性还有两个很实用的小鸡技巧：1）计算属性可以依赖其他计算属性；2）计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据，例如：

<div id="app1">

    </div>
    <div id="app2">
        {{ reversedText }}
    </div>
    <script>
        var app1 = new Vue ({
            el: '#app1',
            data: {
                text: '123,456'
            }
        });

        var app2 = new Vue ({
            el: '#app2',
            computed: {
                reversedText: function () {
                    // 这里实例 app1 的数据 text
                    return app1.text.split(',').reverse().join(',');
                }
            }
        })
    </script>

        这里创建的两个 Vue 实例 app1 和 app2 ，在 app2 的计算属性 reversedText 中，依赖的是 app1 的数据 text ，所以当 text 变化时，实例 app2 的计算属性也会变化。这样的用法在组件和组件化里会用到，尤其是在多人协同开发时很常见，因为你写的一个组件所用到的数据需要依赖他人的组件提供。

三、计算属性缓存

        上述的示例代码，调用 methods 里的方法也可以与计算属性起到同样的作用，比如用 methods 改写为：

    <div id="app">
        <!-- 注意：这里的 reversedText 是方法，所以要带 () -->
        {{ reversedText() }}
    </div>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                text: '123,456'
            },
            methods: {
                reversedText: function () {
                    // 这里的 this 指向的是当前 Vue 实例
                    return this.text.split(',').reverse().join(',');
                }
            }
        })
    </script>

        没有使用计算属性，在 methods 里定义了一个方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。既然使用 methods 就可以实现，那么为什么还需要计算属性呢？原因就是计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以 text 只要不改变，计算属性也就不更新。例如：

      computed: {
            now: function () {
                return Date.now();
            }
        }

        这里的 Data.now() 不是响应式依赖，所以计算属性 now 不会更新。但是 methods 则不同，只要重新渲染，它就会被调用，因此函数也会被执行。

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

 

转载于:https://my.oschina.net/u/3375733/blog/2245494