本文主要是介绍Java程序员从笨鸟到菜鸟(三十八)vue,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、methods和computed的区别
1.实现上:
<div id="app-9"><p>Original message: "{{ message }}"</p><p>Methdos reversed message: "{{ Methods() }}"</p><p>Computed reversed message: "{{ Computed }}"</p>
</div><script>
var app9 = new Vue({el: '#app-9',data: {message: 'hello'},methods: {Methods: function() {return this.message.split('').reverse().join('')}},computed: {Computed: function() {return this.message.split('').reverse().join('')}}
})
</script>
运行结果:
Original message: "hello"
Methdos reversed message: "olleh"
Computed reversed message: "olleh"
methods:相应的方法名后面需要加()
2.缓存
computed计算属性时基于他们的依赖进行缓存的,计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 Computed计算属性会立即返回之前的计算结果,而不必再次执行函数
为什么要用缓存:当有一个性能开销比较大的计算属性A,它需要遍历一个极大的数组做大量的运算,然而我们有可能有其它属性依赖A,如果没有缓存,我们将不可避免的多次执行 A 的 getter!
总之:需要缓存用computed,不需要缓存用methods
这篇关于Java程序员从笨鸟到菜鸟(三十八)vue的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!