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