一起学Vue之计算属性和侦听器

概述

在Vue开发中，模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。当你想要在模板中多次引用相同表达式时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。本文主要讲解Vue中的计算属性和侦听器，仅供学习分享使用，如有不足之前，还请指正。

计算属性

计算属性步骤：

1. 在computed属性中增加reverseMsg方法，如下所示：

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'welcome to vue world!!!'

        },
        computed: {
            reverseMsg: function() {
                // `this` 指向 vm 实例
                return this.msg.split('').reverse().join('');
            }
        }

    });
</script>

2. 在Html中进行引用，你可以像绑定普通属性一样在模板中绑定计算属性。

Vue 知道 vm.reverseMsg 依赖于 vm.msg，因此当 vm.msg 发生改变时，所有依赖 vm.reverseMsg 的绑定也会更新。如下所示：

<p>原始信息: {{ msg }}</p>
<p>计算属性反转信息: {{ reverseMsg }}</p>

采用表达式的方式 ，则是如下所示：

<span>{{ msg.split('').reverse().join('') }}</span>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 msg 的翻转字符串。此处对比一下，采用计算属性的方式，则更加简洁明了。

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果，我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。

如下所示，声明一个方法：

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'welcome to vue world!!!'
        },
        methods: {
            reversedMsg: function() {
                return this.msg.split('').reverse().join('');
            }
        }

    });
</script>

在Html中进行引用，如下所示：

<p>Reversed message: "{{ reversedMsg() }}"</p>

差异：不同的是计算属性是基于它们的响应式依赖进行缓存的。 只在相关响应式依赖发生改变时它们才会重新求值。 这就意味着只要 msg 还没有发生改变，多次访问 reversedMsg计算属性会立即返回之前的计算结果，而不必再次执行函数。 即：计算属性只有当依赖属性发生改变时，才重新计算，而函数需要每次都重新计算。
也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：  相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。 

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'welcome to vue world!!!'

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

        });
</script>

如下所示，将不会随着时间的改变而触发。

<p>{{now}}</p>

如果你不希望有缓存，请用方法来替代。

计算属性 vs 侦听属性

如下所示：有两个data属性，firstName和lastName,fullName依赖说前两个变化而变化。如果需要采用侦听属性，需要对firstName和lastName进行侦听。

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar',
        },
        computed: {
            fullName2: function() {
                return this.firstName + ' ' + this.lastName;
            }
        },
        watch: {
            firstName: function(val) {
                this.fullName = val + ' ' + this.lastName;
            },
            lastName: function(val) {
                this.fullName = this.firstName + ' ' + val;
            }
        }
    });
</script>

上面代码是命令式且重复的。将它与计算属性的版本进行比较。

<div id="demo">{{ fullName }}</div>
<div id="demo">{{ fullName2 }}</div>

如上所示：fullName采用侦听属性，fullName2采用计算属性，对比一下，好得多了，不是吗？

计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：如下所示：

fullName3: {
    //getter
    get: function() {
        return this.firstName + ' ' + this.lastName;
    },
    //setter
    set: function(newValue) {
        console.log('newValue=' + newValue);
        var names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
    }
}

在UI中引用的方式是一样的。当fullName3的值发生改变时，将更新firstName和lastName。

<p>{{fullName3}}</p>

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。如下所示：

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            question: '',
            answer: 'I cannot give you an answer until you ask a question!'

        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            question: function(newQuestion, oldQuestion) {
                if (newQuestion == '') {
                    this.answer = 'Waiting for you to stop typing...';
                } else {
                    this.answer = '请回答';
                }
            }
        }
    });
</script>

在页面中绑定属性

<p>Ask a yes/no question:
    <input v-model="question">
</p>
<p>{{ answer }}</p>

在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

在本示例中用的全部代码 ，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>一起学Vue之计算属性和侦听器</title>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <span>{{msg}}</span>
            <h2>计算属性</h2>
            <!--
             模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
             -->
            <br />
            <span>
                {{ msg.split('').reverse().join('') }}
            </span>
            <!--
            在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 msg 的翻转字符串。
            当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
            所以，对于任何复杂逻辑，你都应当使用计算属性
             -->
            <p>原始信息: {{ msg }}</p>
            <p>计算属性反转信息: {{ reverseMsg }}</p>
            <!--
            这里我们声明了一个计算属性 reverseMsg。我们提供的函数将用作属性 vm.reverseMsg 的 getter 函数：
             -->
            <!--
             你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reverseMsg 依赖于 vm.msg，
             因此当 vm.msg 发生改变时，所有依赖 vm.reverseMsg 的绑定也会更新。
              -->
            <h2>计算属性缓存 vs 方法</h2>
            <p>Reversed message: "{{ reversedMsg() }}"</p>
            <!--
            你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：
            -->
            <!--
            我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
            然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。
            只在相关响应式依赖发生改变时它们才会重新求值。
            这就意味着只要 msg 还没有发生改变，多次访问 reversedMsg 计算属性会立即返回之前的计算结果，而不必再次执行函数。
            即：计算属性只有当依赖属性发生改变时，才重新计算，而函数需要每次都重新计算。
             -->
            <!--
            也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
            相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
            如果你不希望有缓存，请用方法来替代
             -->
            <p>{{now}}</p>
            <h2>计算属性 vs 侦听属性</h2>
            <div id="demo">{{ fullName }}</div>
            <!--
             上面代码是命令式且重复的。将它与计算属性的版本进行比较：
             -->
            <div id="demo">{{ fullName2 }}</div>
            <!--
             好得多了，不是吗？
             -->
            <h2>计算属性的 setter</h2>
            <!--
             计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
             -->
            <p>{{fullName3}}</p>
            <h2>侦听器</h2>
            <!--
             虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
             这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
             当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
             -->
            <p>Ask a yes/no question:
                <input v-model="question">
            </p>
            <p>{{ answer }}</p>
            <!--
             在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，
             限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。
             这些都是计算属性无法做到的。
             -->
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: 'welcome to vue world!!!',
                    firstName: 'Foo',
                    lastName: 'Bar',
                    fullName: 'Foo Bar',
                    question: '',
                    answer: 'I cannot give you an answer until you ask a question!'


                },
                methods: {
                    reversedMsg: function() {
                        return this.msg.split('').reverse().join('')
                    }
                },
                computed: {
                    reverseMsg: function() {
                        // `this` 指向 vm 实例
                        return this.msg.split('').reverse().join('');
                    },
                    now: function() {
                        return Date.now().toString();
                    },
                    fullName2: function() {
                        return this.firstName + ' ' + this.lastName;
                    },
                    fullName3: {
                        //getter
                        get: function() {
                            return this.firstName + ' ' + this.lastName;
                        },
                        //setter
                        set: function(newValue) {
                            console.log('newValue=' + newValue);
                            var names = newValue.split(' ');
                            this.firstName = names[0];
                            this.lastName = names[names.length - 1];
                        }
                    }
                },
                watch: {
                    firstName: function(val) {
                        this.fullName = val + ' ' + this.lastName;
                    },
                    lastName: function(val) {
                        this.fullName = this.firstName + ' ' + val;
                    },
                    // 如果 `question` 发生改变，这个函数就会运行
                    question: function(newQuestion, oldQuestion) {
                        if (newQuestion == '') {
                            this.answer = 'Waiting for you to stop typing...';
                        } else {
                            this.answer = '请回答';
                        }
                    }

                }

            });
        </script>
    </body>
</html>

备注

暴虎冯河，死而无悔者，吾不与也;必也，临事而惧，好谋而成者也。