目录
1. 计算属性
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>计算属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div>
<h2>计算属性</h2>
</div>
<div id="vue03">
<div v-for="a in msg">
{{a.name}}：<input type="text" :value="a.score" />
</div>
<div>
总分数：{{sum}}
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#vue03",//挂载区域
data:function(){//定义属性
return {
msg:[
{name:"数学",score:88},
{name:"语文",score:89},
{name:"英文",score:99},
{name:"体育",score:100}
],
m:1000,
km:1
}
},
computed:{//计算属性
sum:function(){
var sum=0;
//循环遍历
for (var i=0;i<this.msg.length;i++) {
sum+=this.msg[i].score;
}
return sum;
}
}
})
</script>
</html>
2. 监听属性
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>监听属性</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue03">
<h2>监听属性</h2>
米：<input type="text" v-model="m" /> 千 米：<input type="text" v-model="km" />
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#vue03",//挂载区域
data:function(){//定义属性
return {
m:1000,
km:1
}
},
watch:{//监听属性
m:function(){
this.km=this.m/1000;
},
km:function(){
this.m=this.km*1000;
}
}
})
</script>
</html>
小结：计算属性和监听属性的区别
自己的理解
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别：刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!
原文地址：https://www.jb51.cc/wenti/3280364.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
