computed:会将结果放到缓存里面,页面取数据不会改变(可以从F12的console中进行取值,测试),只有刷新页面,从而刷新缓存,值才会改变。
代码如下例:
<body>
<!--view层 模板-->
<div id="app">
<p>方法时间戳:{{getNowTime1()}}</p>
<p>计算属性时间戳:{{getNowTime2}}</p>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: "hi,big 吉吉!"
},
methods:{
getNowTime1:function(){
return Date.now();//返回一个时间戳
}
},
computed:{//计算属性:methons,computed方法名不能重名,重名之后,只会调用methods的方法
getNowTime2:function(){
this.message;//通过F12,如果修改message值的话,会刷新缓存
return Date.now();//返回一个时间戳
}
}
});
</script>
</body>