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

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

说到这里有没有想到点什么?有没有立马想起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>
在上面这种情况下,模板不再简单和清晰。在意识到这是反向显示 message 之前,你不得不再次确认第二遍。当你想要在模板中多次反向显示 message 的时候,问题会变得更糟糕。这就是对于任何复杂逻辑,你都应当使用计算属性的原因。

下面我将运用method与computed进行比较

<!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}}</p>
        //直接在模板中绑定表达式
        <p>{{message.split('').reverse().join('')}}</p>

        //运用计算属性
        <p>{{reverseMessage}}</p>

        //运用methods方式
        <p>{{methodMessage()}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                message:"hello"
            },
            computed:{
                reverseMessage:function(){
                    return this.message.split('').reverse().join('');
                }
            },

            methods:{
                methodMessage:function () {
                    return this.message.split('').reverse().join('');
                }
            }

        })
    </script>
</body>
</html>

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

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

Logo

前往低代码交流专区

更多推荐