Vue computed vs methods

约定不等于承诺〃 2022-12-22 06:20 134阅读 0赞

先看代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div id="app">
        <p>Original message: "{
       { message }}"</p>
        <p>Computed reversed message: "{
       { reverseMessage }}"</p>
        <p>Computed reversed message: "{
       { mm() }}"</p>
    </div>
    
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello,Vue！'
            },
            computed: {
                reverseMessage: function () {
                    console.log("reverseMessage===");
                    return this.message.split("").reverse().join("");
                }
            },
            methods: {
                mm: function () {
                    console.log("methods===");
                    return this.message.split("").reverse().join("");
                }
            }
        });
    </script>
    </body>
    </html>

如上所示：在vue的使用中，我们想要倒转一个字符串，通过computed和methods均可以实现。

而不同的是，

computed中定义的reverseMessage属性是基于他们的响应式缓存的概念，

简单来说，在第一次渲染时，reverseMessage这个自定义的属性会根据逻辑进行计算，后面再取值时，只要其依赖的响应式业务逻辑值不变，那么是直接取上次的计算结果的。这和我们经常说的缓存概念是一致的，利用这一点，我们可以在前端做一些提高查询效率的事情。

而methods中定义的方法，在每次调用的时候，都会重新根据逻辑进行计算。

--------------------

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 **A**，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 **A**。如果没有缓存，我们将不可避免的多次执行 **A** 的 getter！如果你不希望有缓存，请用方法来替代。