浅析Vue中method与computed的区别


Posted in Javascript onMarch 06, 2018

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。

computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用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方式。

总结

以上所述是小编给大家介绍的Vue中method与computed的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
再谈JavaScript线程
Jul 10 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
浅谈React高阶组件
Mar 28 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 #Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 #Javascript
JavaScript基础心法 数据类型
Mar 05 #Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 #Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 #Javascript
node.js通过axios实现网络请求的方法
Mar 05 #Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 #Javascript
You might like
php 在文件指定行插入数据的代码
2010/05/08 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
php自定义时间转换函数示例
2016/12/07 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python编码最佳实践之总结
2016/02/14 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python中的decorator的作用详解
2018/07/26 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python实现大文件分割与合并
2019/07/22 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
大学生村官承诺书
2014/03/28 职场文书
食品安全标语
2014/06/07 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python