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 相关文章推荐
JS实现的省份级联实例代码
Jun 24 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
js实现抽奖效果
Mar 27 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
AngularJS实现多级下拉框
Mar 25 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数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
简单解析Django框架中的表单验证
2015/07/17 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
DNA基因检测和分析:23andMe
2019/05/01 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
11月升旗仪式讲话稿
2014/02/15 职场文书
英语专业自荐书
2014/06/13 职场文书