Vue method与computed的区别

为了说明method与computed的区别，在此我想先来看看computed属性在vue官网中的说法：模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。下面我们来看看一个例子：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title

PHP__廊外诗鸽

47025人浏览 · 2017-07-28 23:05:44

PHP__廊外诗鸽 · 2017-07-28 23:05:44 发布

为了说明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方式

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^