vue.js中的计算属性(computed)methodswatched三者的区别
Posted 指尖下的精灵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js中的计算属性(computed)methodswatched三者的区别相关的知识，希望对你有一定的参考价值。
计算属性：
和普通的属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会随之发生改变。
Methods：
Methods是方法，只要调用它，函数就会执行。
相同点：
两者达到的效果是一样的
不同点：
计算属性是基于他们的依赖进行缓存的，只有相关依赖发生改变时才会重新求值，只要相关依赖没有发生改变，只会返回之前的结果，不再执行函数
<p>原始数据:{{msg}}</p>
<p>改变后的数据:{{changemsg}}</p>
var vm = new Vue({
el:"#example",
data:{
msg:"hello",
},
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'
},
watched:{
firstName:function(val){
this.fullName = val +''+this.lastName
},
lastName:function(val){
this.fullName = this.firstName+' '+val
}
}
})
computed属性：
代码更简单
var vm = Vue({
el:"#demo",
data:{
firstName:'Foo',
lastName:'Bar'
},
computed:{
fullName:function(){
return this.firstName+''+this.lastName
}
}
})
本文转载自：http://blog.csdn.net/seven_an/article/details/73204679 如若不允许转载，请及时联系我方，我方会及时处理。
以上是关于vue.js中的计算属性(computed)methodswatched三者的区别的主要内容，如果未能解决你的问题，请参考以下文章
vue计算属性computed与监听属性watch的基本使用
vue 计算属性computed get 怎么把当前操作的dom传进去
vue.js中，computed计算属性是不是只有一个getter和一个setter