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