一、计算属性
用关键字computed
来实现,每一个计算属性本质上是一个函数
当我们需要对数据进行大量操作时,例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
对message进行翻转字符串操作,当我们需要对多个数据都进行反转操作时,使用计算属性
就很简便
<!-- 计算属性 -->
<div id="app">
<p>{{content}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
text:'123,456,789'
},
computed:
{
content:function(){
return this.text.split(',').reverse().join(',')
}
}
})
</script>
- 应用于大量计算或遍历大数组,可以获得缓存,提高效率
1.计算属性VS事件方法
我们可以使用 methods 来替代 computed,效果上两个都是一样的
- 但是 computed 是基于它的
依赖缓存
,只有相关依赖发生改变时才会重新取值。 - 而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
2.计算属性`getter(读取数据)`和`setter(改变属性的值)`
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter
<div id="setter">
FirstName:
<input type="text" v-model='Firstname'>
<br><br>
LastName:
<input type="text" v-model='Lastname'>
<br><br>
FullName:{{fullname}}
</div>
<script>
new Vue({
el:'#setter',
data:{
Firstname:'lalisa',
Lastname:'manoban'
},
computed:{
fullname:{
get:function(){ //getter方法用于读取数据,默认被调用
return this.Firstname+' '+this.Lastname;
},
set:function(newvalue){ //setter方法,在设置属性值时该方法被调用
let names=newvalue.split(',')
this.Firstname=names[0]
this.Lastname=names[1]
}
}
}
})
</script>
二、侦听器
当数据发生变化(执行异步操作)时,及时做出响应处理
使用:在vue对象上挂在watch
属性,监听data中的数据
<!-- 侦听器watch -->
<div id="cat">
<input type="text" v-model='msg'>
<br>
<p>{{born}}</p>
</div>
<script>
new Vue({
el:'#cat',
data:{
msg:'abc',
born:'未改变'
},
watch:{
msg:function(e){
this.born='已改变'
console.log(e)
}
}
})
</script>
以上代码中我们创建了一个输入框,data 属性中, msg 初始值为 abc。watch 对象创建了 data 对象的监控方法: msg。
当我们再输入框输入数据时,watch 会实时监听数据变化并改变自身的值born。