Day 16. 计算属性Computed Properties

前几天我们介绍了如何将vue 物件中的属性绑定到模板中，我们讲到可以直接在模板中插入JavaScript 表达式来做运算，但实际上Vue不建议我们这麽做，若是简单的例子还可以，但真正用在开发上会导致内容变复杂，难被阅读(HTML 内穿插着 JavaScript 的代码)、难维护(单纯用表达式的话，如果有复用的需求会造成在模板上重复写多次相同的逻辑)。

像这样:

<div id="app">
    {{ message.split('').reverse().join('') }}
</div>

在这边，模板内已经不是简单的声明式逻辑，我们没办法一看就知道这串要拿来显示变量message的翻转字串，而如果我们需要在模板中多处使用翻转字串，整个程序码就会变得复杂又难阅读。

这时候我们就需要使用到计算属性(ノё∀ё)ノ☆ﾟ

Computed Properties 计算属性

当我们的资料太过复杂、需要一职重复使用的时候，我们可以把它拔出来!
在 vue 物件的 computed 属性加入自定义的 computed property，并定义其对应的函式。

范例:
这边我们定义了一个计算属性的getter:reversedMessage，reversedMessage 相依於 message 属性，所以当 message 改变时，reversedMessage 就会重新计算，跟着改变٩(｡・ω・｡)و

<div id="app">
        <p>原本的字串: "{{ message }}"</p>
        <p> computed倒转过後的字串: "{{ reversedMessage }}"</p>
</div>

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            },
            computed: {
                // 计算属性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm instance
                    return this.message.split('').reverse().join('')
                }
            }
        });
</script>

当我们打开console打上vm.message=”Goodbye”，将原本的资料从Hello改成Goodbye，透过computed倒转的字串也会连动一起改变。

计算属性的setter

上面的例子我们的computed是一个function，而这个function是这个计算属性的getter(我们没写setter的时候预设都是getter)，但如果我们需要setter也有它的设置方式!

getter(读取)、setter(设值、写入)

范例:

<div id="app">
    {{ fullName }}
</div>
    
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar'
        },
        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>

打开Vue Devtools可以看到data里面有我们设定的firstName跟lastName，而computed里面有组成後的fullName。

当我们在 console 中执行 vm.fullName = 'John Doe'，可以观察到不只画面更新， firstName 和 lastName被更新了，这时候就是computed中的setter把fullName拆开，前者的丢到firstName里面，後者丢到lastName里面。