计算属性(computed)和方法(methods)的区别
计算属性类似于缓存的概念
计算出来的结果保存在属性中
在内存中运行(虚拟DOM)
好处:节省浏览器成本
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层:模板-->
<div id="app">
<p>currentTime1{{currentTime1()}}</p> //通过方法来调用
<p>currentTime2{{currentTime2}}</p> //通过属性调用 (第一次调用后就不变化存入缓存中,之后每次调用时从缓存中取出,当数据发生变化会自动刷新)
</div>
<!--vm.message
"hello"
vm.currentTime2
1638100323286
vm.currentTime2
1638100323286
vm.message='123'
"123"
vm.currentTime2
1638100360020-->
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
/*model层:数据*/
var vm=new Vue({
el:"#app",
data: {
message: "hello",
},
methods:{
currentTime1:function () {
return Date.now();//返回一个时间戳
}
},
computed: {
//计算属性和methods方法名不能重名 重名后只会调用methods中方法
currentTime2:function () {
this.message;
return Date.now();//返回一个时间戳
}
}
});
</script>
</body>
</html>