计算属性
程序员文章站
2022-05-08 16:17:53
...
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="example">
<p>{{msg}}</p>
<ul>
<li v-for="tmp in list">
<h2>{{myFunc()}}</h2>
<h2>{{myFunc1}}</h2>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#example',
data:{
msg:'VueJS is Awesome',
list:[100,200,300],
count:0
},
methods:{
myFunc:function(){
console.log("in myFunc");
return this.count;
}
},
computed:{
myFunc1:function(){
console.log("in myFunc1");
return this.count;
}
}
});
</script>
</body>
</html>可以看到in myFunc执行了三次，in myFunc1只执行了一次，是因为计算属性是基于缓存的，当数据没有更新时，就不会调用，直接使用上次计算出来的值，这样就会提高效率。