vue-计算属性和方法

计算属性有缓存，不刷新页面的情况下数据不会发生改变；

方法没有缓存，不刷新页面的情况下数据也会发生改变。

var hello = new Vue({
el : "#hello",
data : {
message : "hello"
},
methods : {
reverseMessageMethod : function(){
return this.message.split("").reverse().join("") + Date.now();
}
},
computed : {
reverseMessage : function(){
return this.message.split("").reverse().join("") + Date.now();
}
}
});

<div>计算属性-缓存：{{reverseMessage}}</div>
<div>方法：{{reverseMessageMethod()}}</div>

计算属性和方法的结果返回时，都有添加时间戳，所以可以通过console进行操作查看两者的区别：

方法-hello.reverseMessageMethod()；

计算属性-hello.reverseMessage;

转载于:https://my.oschina.net/zhangdq/blog/1610725

• 点赞
• 收藏
• 分享
• 文章举报