vue中计算属性（computed）、methods和watched之间的区别
更新时间：2017年07月27日 11:02:59 作者：seven_an
这篇文章主要给大家介绍了关于vue中计算属性（computed）、methods和watched之间区别的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
前言
本文主要给大家介绍了关于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能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
elementUI Pagination 分页指定最大页的问题及解决方法(page-count)
项目中遇到数据量大,查询的字段多,但用户主要使用的是最近的一些数据,1万条以后的数据一般不使用,这篇文章主要介绍了elementUI Pagination 分页指定最大页的问题及解决方法(page-count),需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue favicon设置以及动态修改favicon的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了如何解决vue2.0下IE浏览器白屏问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在浏览器平台上，用它来渲染其中的真实DOM元素。渲染器不仅能够渲染真实的DOM元素，它还是框架跨平台能力的关键。所以在设计渲染器的时候一定要考虑好自定义的能力2023-01-01
vuex中store存储store.commit和store.dispatch的区别及说明
这篇文章主要介绍了vuex中store存储store.commit和store.dispatch的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了iphone刘海屏页面适配方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
Vuex数据持久化可以很好的解决全局状态管理,当刷新后数据会消失,这是我们不愿意看到的。这篇文章主要给大家介绍了关于Vuex数据持久化实现的思路与代码，需要的朋友可以参考下2021-05-05
在Vue中,我们可以非常便捷地通过标签实现状态的保存,这篇文章主要给大家介绍了关于Vue后台中如何优雅的书写状态标签的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
最近火爆全网的羊了个羊小程序，背景是根据官方介绍，“羊了个羊”是一款闯关消除小游戏，通关率不到0.1%。主要玩法为重叠的各类方块，需要在下方7个栏内完成消除，其特点就是“极难”，也因此成为热门挑战，对vue3版本网页小游戏设计思路感兴趣的朋友跟随小编一起看看吧2022-12-12
组件(Component) 是Vue.js最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于利用vue3自己实现计数功能组件封装的相关资料,需要的朋友可以参考下2021-09-09
最新评论