Vue学习——计算属性

概述

通常我们会在模版中绑定表达式，但如果表达式的逻辑过于复杂，则模版会变得臃且难以维护。

例：Mustache语法中的表达式调用了三个方法来最终实现字符串的反转

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

定义计算属性

表达式的逻辑过于复杂的时候，都应当考虑使用计算属性。计算属性是以函数形式，在Vue实例的选项对象的computed选项中定义。我们将上面字符串反转的功能使用计算属性来实现。

代码示例如下：

<div="app">
    <p>原始字符串：{{message}}</p>
    <p>计算后的反转字符串：{{reversedMessage}}</p>
</div>

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

我们声明了一个计算属性reversedMessage，给出的函数将用作属性vm.reversedMessage的getter函数。

当message属性的值改变时，reversedMessage的值也会自动更新，并且会自动同步更新DOM部分。当浏览器的控制台窗口中修改vm.message的值，可以发现reversedMessage的值也会随之改变。

计算属性默认只有getter，因此是不能直接修改计算属性的，如果需要也可以提供一个setter。

代码示例如下：

<div="app">
    <p>First name: <input type="text" v-model="firstName"></p>
    <p>Last name: <input type="text" v-model="lastName"></p>
    <p>{{fullName}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'John',
            lastName: 'Tierney'
        },
        computed: {
            fullName: {
                // getter
                get: function() {
                    return this.firstName + ' ' + this.lastName
                },
                // setter
                set: function(newName) {
                    var names = newName.split('')
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            }
        },
    });
</script>

任意修改firstName或者lastName的值，fullName的值也会自动更新，这是调用它的getter函数来实现的。在浏览器的控制台窗口中输入vm.fullName="Bruce Willis"，可以看到firstName和lastName的值也同时发生了改变，这时调用fullName的setter函数来实现的。

计算属性缓存

复杂的表达式也可以放到方法中去实现，然后在绑定表达式中调用方法即可。

例：使用方法实现字符串翻转

<div="app">
    <p>原始字符串：{{message}}</p>
    <p>计算后的反转字符串：{{reversedMessage}}</p>
</div>

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

既然使用方法能实现与计算属性相同的结果，那么为什么还要使用计算属性呢？

因为计算属性是基于它的响应式依赖进行缓存的，只有在计算属性的相关响应式依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不会再次执行函数；而如果采用方法，那么不管什么时候访问reversedMessage()方法，该方法都会被调用。

例：同时使用方法和计算属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>计算属性</title>
    </head>
    <body>
        <div id="app">
            <p>原始字符串：{{message}}</p>
            <p>计算后的反转字符串：{{reversedMessage}}</p>
            <p>方法调用后的反转字符串：{{reversedMessage2()}}</p>
        </div>
        
        <script src="./vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'Hello!'
                },
                computed: {
                    // 计算属性的getter
                    reversedMessage: function() {
                        alert("计算属性")
                        return this.message.split('').reverse().join('')
                    }
                },
                methods: {
                    reversedMessage2: function() {
                        alert("方法")
                        return this.message.split('').reverse().join('')
                    }     
                }
            })
            let msg = vm.reversedMessage
            mst = vm.reversedMessage2()
        </script>
    </body>
</html>

我们在计算属性reversedMessage的getter函数和方法reversedMessage2()中调用alert()语句显示一个消息框，在Vue实例构建后，我们分别访问vm.reversedMessage计算属性和调用vm.reversedMessage2()方法。

使用浏览器打开该页面，可以依次看到“计算属性”“方法”“方法”共三个消息框，前两个消息框是模版中的Mustache标签被替换时显示的，最后一个“方法”消息框是代码最后调用vm.reversedMessage2()方法显示的，可以看到最后对vm.reversedMessage计算属性的访问并没有弹出消息框，这是因为它所依赖的message属性并未发生改变。

下面代码中的计算属性now在初次渲染后不会再更新，因为Date.now()不是响应式依赖。

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

v-for和v-if一起使用的替代方案

在前文的指令篇中，讲到了将v-for和v-if一起使用，在渲染列表时，根据v-if指令的条件判断来过滤列表中不满足条件的列表项。实际上，这个功能也可以使用计算属性来完成。

修改前文代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for与计算属性</title>
    </head>
    <body>
        <div id="app">
            <h1>已完成的工作计划</h1>
            <ul>
                <li v-for="plan in completedPlans">
                    {{plan.content}}
                </li>
            </ul>
            <h1>未完成的工作计划</h1>
            <ul>
                <li v-for="plan in incompletePlans">
                    {{plan.content}}
                </li>
            </ul>
        </div>
        
        <script src="./vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    plans: [
                        {content: 'planA', isComplete: false},
                        {content: 'planB', isComplete: true},
                        {content: 'planC', isComplete: false},
                        {content: 'planD', isComplete: true},
                        {content: 'planE', isComplete: false}
                    ]
                },
                computed: {
                    // 计算属性的getter
                    completedPlans: function() {
                        return this.plans.filter(plan => plan.isComplete)
                    },
                    incompletePlans: function() {
                        return this.plans.filter(plan => !plan.isComplete)
                    }
                }
            })
        </script>
    </body>
</html>

这里不建议把v-for和v-if同时用在同一个元素上，这是因为虽然v-if指令只渲染了部分元素，但在每次重新渲染时仍然要遍历整个列表，而不论渲染的元素是否发生过改变。

采用计算属性过滤后再遍历，可以获得如下好处：

过滤后的列表只会在plans数组发生相关变化时才被重新计算，过滤更高效。
使用v-for="plan in completedPlans"之后，在渲染的时候只遍历已完成的计划，渲染更高效。
解耦渲染层的逻辑，可维护性（对逻辑的更改和扩展）更强。