vue中计算属性(computed)、methods和watched之间的区别


Posted in Javascript onJuly 27, 2017

前言

本文主要给大家介绍了关于vue中计算属性(computed)、methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍:

计算属性

和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变。

Methods

methods是方法,只要调用它,函数就会执行。

相同:两者达到的效果是同样的。

不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变,只会返回之前的结果,不再执行函数。

<p>原始数据:{{msg}}</p> 
<p>改变后的数据:{{changemsg}}</p> 
var vm=new Vue({ 
<span style="white-space:pre"> </span>el:"#example", 
 data:{ 
 <span style="white-space:pre"> </span>msg:"hello", 
<span style="white-space:pre"> </span>}, 
<span style="white-space:pre"> </span>computed:{ 
  changemsg:function(){ 
  return this.msg.split("").reverse().join(""); 
 }, 
}

computed属性  VS watched 属性

watched属性:代码更易于理解,它指定监测的值是谁,然后相应的改变其他的值。

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 },
 watch: {
 firstName: function (val) {
  this.fullName = val + ' ' + this.lastName
 },
 lastName: function (val) {
  this.fullName = this.firstName + ' ' + val
 }
 }
})

computed属性:代码更简单。

var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用shell能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
angular2+node.js express打包部署的实战
Jul 27 #Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 #Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 #jQuery
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 #Javascript
Vue2.0如何发布项目实战
Jul 27 #Javascript
在Vue中如何使用Cookie操作实例
Jul 27 #Javascript
vue 怎么创建组件及组件使用方法
Jul 27 #Javascript
You might like
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
Python中的random()方法的使用介绍
2015/05/15 Python
python数据结构之列表和元组的详解
2017/09/23 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
NumPy排序的实现
2020/01/21 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
2016年大学生党员承诺书
2016/03/24 职场文书
六年级作文之关于梦
2019/10/22 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python