Vue中 computed和methos有啥区别

Vue中 computed和methos有啥区别

computed（计算）：
methos（方法）：
先来看一段代码

 <div id="app">
        <span>
            {{computed}}
        </span>
        <span>
            {{computed}}
        </span>
        <span>
            {{methods()}}
        </span>
        <span>
            {{methods()}}
        </span>
    </div>

</body>
<script>
    var vm = new Vue({

        el: "#app",
        data: {

        },
        computed: {
            computed: function () {
                console.log("computed")
            }
        },
        methods: {
            methods: function () {
                console.log("methods")
             }
        }





    })
</script>

看一下运行结果

这一段代码比较简单，
在插值表达式中呢，写法不一样，methods中的要加上括号，computed中呢不需要
输出结果methods两次，computed一次

区别：
绑定方式不同。computed直接以对象属性方式调用，而methods必须要函数执行才可以得到结果，必须加括号。
缓存：computed 存在缓存，只会被调用一次，会侦听变化，不变化只会一次。所以computed 适合做计算比较复杂的逻辑，以及加载量数据大不变的数据。methods有几次就几次