Vue中method与computed的区别

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

为了说明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方式。另外,computed计算属性里面的方法不可以传参数,methods方式里面的方法可以传参数。

 

相关文章
|
1天前
|
JavaScript
|
3天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
13 6
|
3天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
13 4
|
3天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
10 1
|
3天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
13 1
|
8天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
19 1
|
9天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
9天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
3天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
8 0