6.0、vue的计算属性
前端vuetest6.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuetest6</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
currenttime1:{{currenttime1()}}
<br/>
currenttime2:{{currenttime2}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg:"hello vue!"
},
methods: {
currenttime1: function () {
return Date.now();//返回一个时间戳
}
},
computed: {//计算属性:methods、computed 方法不能重名，重名只有，只会调用methods的方法
currenttime2: function () {
this.msg;
return Date.now();//返回一个时间戳
}
}
})
</script>
</body>
</html>
methods和computed的区别：
methods和computed表面上看两者都是写函数、调用函数完成的结果相同，但是过程却大不相同。
首先是调用的使用，methods里的函数需要函数名()来调用，而computed里的函数调用直接函数名即可调用
methods相当于每次加载都会去执行一遍方法函数的内容，而computed里的函数你可以把他看成一个缓存，第一次会正常加载函数并返回结果，但是如果第二次调用的情况相同则不会去调用函数内容，会直接返回结果（你可以这么想，假设函数内执行的是两个数字相加，我们第一次传进两个数字1和1也就是执行1+1得到结果等于2返回，如果第二次再次传递两个数字还是1和1那么computed不会再次去执行一遍函数体，而是直接返回结果2。但是如果传入的两个数字改变了，则会删除缓存然后执行一遍函数体再返回结果）
这样从侧面可以大大降低浏览器的负担和开销成本。
结论：
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
