computed计算属性与methods

总结methods与computed区别：

1. 1 调用方式不同。computed直接以对象属性方式调用，不需要加括号，而methods必须要函数执行才可以得到结果。
2. 2 绑定方式不同。methods与compute纯get方式都是单向绑定，不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。
3. 3 是否存在缓存。methods没有缓存，调用相同的值计算还是会重新计算。competed有缓存，在值不变的情况下不会再次计算，而是直接使用缓存中的值。

4. <div id='app'>
            数学：<input type='text' v-model='mathScore'>
            英语：<input type='text' v-model='englishScore'><br>
            
            <!-- 注意：调用methods的方法一定要加括号 -->
            总分（methods方式）：<input type='text' v-model='sumScore()'><br>
            
            <!-- 注意：调用computed里面的方法不要加括号 -->
            总分（computed，纯get方式）：<input type='text' v-model='sumScore1'><br>
            总分（computed，get+set方式）：<input type='text' v-model='sumScore2'>
        </div>
    
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    mathScore: 80,
                    englishScore: 60
                },
                methods: {
                    sumScore: function () {
                        console.log('methods方式调用！')
                        return (this.mathScore) + (this.englishScore)
                    }
                },
                computed: {
                    // 默认是纯get方式，也是单项绑定
                    sumScore1: function () {
                        console.log('compute的纯get方式调用');
                        return (this.mathScore) + (this.englishScore);
                    },
                    // 采用get加set方式
                    sumScore2: {
                        get: function () {
                            console.log('compute的get方式调用');
                            return (this.mathScore ) + (this.englishScore );
                        },
                    // 当在输入框中更改了总分后，两项成绩就会分别 
                       取到新总分的平均值，从而实现双向绑定          
                        set: function (newValue) {
                            console.log('compute的set方式调用');
                            var avgScore = newValue / 2;
                            this.mathScore = avgScore;
                            this.englishScore = avgScore;
                        }
                    }
                }
            })
        </script>