Vue 计算属性

Posted 2021-01-21 kindleheart

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

什么是计算属性

表达式如果过长，或逻辑更为复杂，就会变得臃肿甚至难以维护，比如：

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

该表达式包含 3 个操作，并不是很清晰，可以用计算属性进行改写：

<div id="app">
    {{ reverseText }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            text: '123,456'
        },
        computed: {
            reverseText: 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: 'iphone xs max',
                    price: 9999,
                    count: 2
                },
                {
                    name: 'ipad pro',
                    price: 6666,
                    count: 2
                }
            ],
            package2: [
                {
                    name: 'apple',
                    price: 20,
                    count: 20
                },
                {
                    name: 'orange',
                    price: 18,
                    count: 20
                }
            ]
        },
        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 就会自动更新，视图中的 prices 也会自动变化。

geter 和 setter

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

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

当在浏览器的控制台执行 app.fullName = ‘John Doe‘; 时，setter 就会被调用，数据 firstName 和 lastName 都会相对更新，视图也会更新。

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

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

计算属性还有两个很实用的小技巧：一个计算属性可以依赖其他的计算属性；二是计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据。

计算属性缓存

在上一篇介绍指令和时间时，你可能发现调用 methods 里的方法也可以与计算属性起到同样的作用，比如本章第一个示例可以用 methods 改写为：

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

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

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

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

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