Vue method与computed的区别

Posted 莫笑我胡为

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue method与computed的区别相关的知识,希望对你有一定的参考价值。

为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:

模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。
  • 1
  • 2

说到这里有没有想到点什么?有没有立马想起html与css样式分离的情况呢。这种写法为我们后期的升级维护留下了空间。

下面我们来看看一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="javascript/vue.min.js"></script>
</head>
<body>
    <div id="app">
        //直接在模板中绑定表达式
        <p>{{message.split(‘‘).reverse().join(‘‘)}}</p>

        //运用计算属性
        <p>message反转之后的结果:{{reverseMessage}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                message:"hello"
            },
            computed:{
                reverseMessage:function(){
                    return this.message.split(‘‘).reverse().join(‘‘);
                }
            }
        })
    </script>
</body>
</html>

我在此将三种方式进行了比较。返回的结果是一样的,写但在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用,必须加().

两种方式在缓存上也大有不同,利用computed计算属性是将 reverseMessage与message绑定,只有当message发生变化时才会触发reverseMessage,而methods方式是每次进入页面都要执行该方法,但是在利用实时信息时,比如显示当前进入页面的时间,必须用methods方式

以上是关于Vue method与computed的区别的主要内容,如果未能解决你的问题,请参考以下文章

vue中computer与watch区别

vue的watch、methods 和 computed 的区别

Vue中computed VS watch 区别 及computed VS method区别

Vue中的methods属性和computed属性的区别

vue中的computed和methods的区别

谈谈vue.js中methods watch和compute的区别和联系