浅析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 相关文章推荐
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
浅谈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函数解决SQL injection
2006/10/09 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php学习笔记之 函数声明
2011/06/09 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
PHP数据过滤的方法
2013/10/30 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
Python分类测试代码实例汇总
2020/07/23 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
浅析Python requests 模块
2020/10/09 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
超市采购员岗位职责
2015/04/07 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS