Vue计算属性与监听属性
Vue计算属性与监听属性
一、计算属性
使用计算属性的理由是：在模板的表达式需要进行复杂逻辑时，应该写在computed。
反例:
<div>
{{message.split('').reverse().join('')}}
//表达式不直观、
</div>
正确例子：
<div id="root">
<p>{{reversedMessage}}</p>
</div>
<script>
const vm = new Vue({
el:"#root",
data(){
return{}
},
//计算属性的底层在于 Object.defineProperty()
computed:{
//简化写法,只带get
reversedMessage(){
//其Vue已经做了处理,this指向vm实例
//get方法
//带有缓存
return this.message.split('').reverse().join('')
}
}
})
</sctipt>
计算属性默认get方法，当需要修改时，可以使用set方法
<div id="root">
<p>{{reversedMessage}}</p>
</div>
<script>
const vm = new Vue({
el:"#root",
data(){
return{}
},
//计算属性的底层在于 Object.defineProperty()
computed:{
reversedMessage:{
//其Vue已经做了处理,this指向vm实例
//get方法
//带有缓存
get(){
console.log("被访问时触发");
return this.message.split('').reverse().join('')
},
set(){
console.log("修改时触发");
}
}
}
})
</sctipt>
二、监听属性
watch
<div id="root">
<p>天气{{isname? '炎热' : '寒冷'}}</p>
<input type="button" value="变化" >
<input type="text" v-model="age">
</div>
<script>
let vm = new Vue({
el:"#root",
data(){
return{
isname:false,
age:20,
nub:{
a:1,
b:2
}
}
},
created() {
console.log(this.$watch) ;
},
//计算属性
watch:{
deep: true, //开启深度监听
immediate:true,//立即调用
age:function(newva,onva){
console.log("新"+newva,"旧"+onva);
},
'nub.a':function(){}
}
})
</script>
调用API用法:vm.$watch('名称', 方法)
<div id="root">
<p>天气{{isname? '炎热' : '寒冷'}}</p>
<input type="button" value="变化" >
<input type="text" v-model="age">
</div>
<script>
let vm = new Vue({
el:"#root",
data(){
return{
isname:false,
age:20,
}
},
created() {
console.log(this.$watch) ;
},
//计算属性API调用
vm.$watch('age',function(newva,onva){
console.log("新"+newva,"旧"+onva);
})
})
</script>
三、计算属性与监听属性的对比
当两者都能实现需求的时候，优先使用computed，面临异步计算，使用watch。
computed:
- 支持缓存、数据变化时，才会计算
- 不支持异步
- 有get和set方法
watch:
- 不支持缓存
- 支持异步
- 接收两参数，一是新值，二是旧值
computed是依赖于响应式缓存的，
当需要在数据变化时执行异步或开销较大的操作时，使用watch
官方链接：计算属性和侦听器
