浅析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 window.opener的用法分析
Apr 07 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
js实现带有动画的返回顶部
Aug 09 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/07/17 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python中pass语句用法实例分析
2015/04/30 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python中作用域的深入讲解
2018/12/10 Python
深入浅析Python中的迭代器
2019/06/04 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
经典的班主任推荐信
2013/10/28 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript