LOADING

Vue中method与computed的区别

–>

Vue中method与computed的区别

为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。

我们来看一个例子:

<!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方式。

 

posted on 2018-03-05 17:43 ranyonsue 阅读() 评论() 编辑 收藏

原文链接:https://www.cnblogs.com/ranyonsue/p/8510333.html
本文来源 互联网收集,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源,如您发现有涉嫌抄袭侵权的内容,请联系本站核实处理。

© 版权声明

相关文章