目录
继续vue命令,计算属性computed和侦听属性watch
一、计算属性
1.1 computed前言
我们先看例子,在文本中输入姓名,在最下方显示姓名,代码如下:
<body>
<div id="root">
姓:<input v-model="firstName"/><br>
名:<input v-model="lastName"/><br>
<div>你输入的姓名为:{{firstName}}{{lastName}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: ''
}
})
</script>
</body>
PS:使用标签,引入vue.js部分我没有写
运行并输入李白,效果如下:
但是我们想不用{{firstName}}{{lastName}}这种,而是使用fullName
<div id="root">
姓:<input v-model="firstName"/><br>
名:<input v-model="lastName"/><br>
<div>你输入的姓名为:{{fullName}}</div>
</div>
这个fullName是通过计firstName和lastName计算而成的一个新变量。
1.2 computed说明
我们可以在Vue使用computed参数来弄
- 类型:
{ [key: string]: Function | { get: Function, set: Function } }
- 详细:
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
注意如果你为一个计算属性使用了箭头函数,则 this
不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
computed: {
aDouble: vm => vm.a * 2
}
计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是不会被更新的。
上面的例子可以修改为:
<body>
<div id="root">
姓:<input v-model="firstName"/><br>
名:<input v-model="lastName"/><br>
<div>你输入的姓名为:{{fullName}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: function () {
return this.firstName+''+this.lastName
}
}
})
</script>
</body>
1.3 computed
好处
计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是不会被更新的。
二、侦听属性
侦听器听某个数据的变化,一旦这个数据发生变化,我就可以在侦听器里写自己的业务逻辑。
2.1 watch方法侦听属性
侦听属性可以使用Vue的watch方法
- 类型:
{ [key: string]: string | Function | Object | Array }
- 详细:
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()
,遍历 watch 对象的每一个 property。
2.2 例子
我们可以统计一下输入的姓名和变化次数
<body>
<div id="root">
姓:<input v-model="firstName"/><br>
名:<input v-model="lastName"/><br>
<div>你输入的姓名为:{{fullName}}</div>
<div>{{mycount}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
mycount: 0
},
computed: {
fullName: function () {
return this.firstName+' '+this.lastName
}
},
watch: {
fullName: function (){
this.mycount++
}
}
})
</script>
</body>
运行效果:
发现改变了2次