Vue 计算属性与监听器
在开发过程中，我们可能会遇到这样的需求：
- 当你有两个或更多的数据，你并不希望把他们全部罗列显示出来，那样代码看起来很冗长。
- 而是需要经过一些计算、处理最后整合成为一个完整的数据结果，并且当组成因子的数据值改变时，它也可以随之动态变化。
下面我们看一个例子：
<div id="root">
姓：<input v-model="firstName"/>
<br>
名：<input v-model="LastName"/>
<div id='show'> </div>
</div>
在 #show div元素中，我想要显示此人的全名，也就是包含他的姓和名。
那么这样好吗？
<div id='show'> {{ firstName }} {{ LastName }} </div>
就像上面提到的，我不希望只是单纯的通过文字的罗列来实现，而是通过数据的整合。
可想而知，全名至少需要一步字符串的连接操作。
使用 data 和 method 属性可能会写得很复杂，所以在此处我们引入一个新的知识点：计算属性
计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 计算属性与监听器 </title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model="firstName"/>
<br>
名：<input v-model="LastName"/>
<div>{{ fullname }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
LastName: ''
},
computed: {
fullname: function (){
return this.firstName + ' ' + this.LastName
}
}
})
</script>
</body>
</html>
- 在此处需要注意的是计算属性中的数据 fullname 也仍是 Vue 实例对象的成员变量，和 firstName、LastName 是同等地位哦！
- computed：如果计算因子没有发生变化，则计算属性对象的值是最后一次的缓存结果，而不是重新计算。
监听器
如果我们想设置一个计数器，每次我们的 input 标签有内容输入，发生改变时，就计数 +1 ：...
<div id="root">
姓：<input v-model="firstName"/>
<br>
名：<input v-model="LastName"/>
<div>{{ fullname }}</div>
<div>
Count：{{ cnt }}
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
LastName: '',
cnt: 0
},
computed: {
fullname: function (){
return this.firstName + ' ' + this.LastName
}
},
watch: {
fullname: function (){
this.count ++
}
}
})
</script>
- 监听器指的是去侦测某个数据，一旦它发生变化，监听器将立刻反应，程序员则可以在此时写入业务逻辑。
- Vue 实例对象中的 watch 属性即是监听器。
