computed和methods的区别

computed和methods的区别：

关于computed和methods，代码如下：

    <h1>{{getmessage}}</h1>
    <h2>{{getmessage}}</h2>
    <h3>{{getmessage}}</h3>
    <h4>{{getmessage}}</h4>

    <!-- <h1>{{getMessage()}}</h1> -->
    <!-- <h2>{{getMessage()}}</h2> -->
    <!-- <h3>{{getMessage()}}</h3> -->
    <!-- <h4>{{getMessage()}}</h4> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        methods: {
            getMessage: function () {
                console.log("调用了methods")
                return this.message
            }
        },
        computed: {
            getmessage: function () {
                console.log("调用了computed")
                return this.message
            }
        }
    })

当我们调用computed时，输出4次message值，结果为：

但是当我们使用methods时，同样输出4次message值，结果如下：

由上可知，计算属性存在缓存，即与计算属性所绑定的值如果不发生改变，计算属性就会依赖缓存，只执行一次，但是methods，每调用一次，就会执行一次，所以对于任何复杂的逻辑，都应当使用计算属性。