vue中计算属性(computed)、methods和watched之间的区别
2017-07-27 11:02
1231 查看
前言
本文主要给大家介绍了关于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能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- vue.js 计算属性及计算属性(computed)、methods、watched三者区别
- vue的计算属性(computed)、methods、watched三者区别
- vue的 计算属性(computed)、methods、watched三者区别
- Vue计算属性(computed)、methods、watched三者区别
- vue计算属性computed和methods的区别
- Vue中computed(计算属性)、methods、watch的区别
- vue 计算属性computed和观察watch 和方法methods
- vue.js中的computed和methods和watch之间的区别
- vue.js——computed属性与methods属性的区别
- 关于computed(计算属性) methods watched (VUE)区别
- vue中计算属性和watch的区别
- vue生命周期、computed属性和 method方法、watch 属性区别
- Vue:计算属性computed
- vue.js计算属性computed用法实例分析
- vue的computed计算属性学习
- vue学习04--[转发]Vuejs中computed、methods、watch的区别
- vue学习05--Vuejs中computed、methods、watch的区别[2]
- Vue中计算属性computed的示例解读
- Vue.js computed vs Methods区别
- Vue.js每天必学之计算属性computed与$watch