computed和watch的作用和区别
1.computed计算属性可以把在dom元素中计算的变到VM中计算,加快速度
2.侦听器watch 比computed灵活;可以做函数节流,Ajax异步数据获取,操作DOM;依赖固定的数据类型
3.总结 computed计算新属性,惰性求值,watch侦听一个原本就存在的数据,发生变化就执行函数
computed适合一个数据被多个数据影响,由多个数据计算得来
watch使用多个数据影响一个数据
watch不能双向绑定
(使用了钩子函数computed和watch,split(’.’),v-model)
<template>
<div>
<label>姓 <input type="text" placeholder="输入姓" v-model="firstName"> </input></label><br>
<label>名 <input type="text" placeholder="输入名" v-model="lastName"> </input></label>
<p>------------------单向绑定-------------------------</p>
<label>姓名 <input type="text" placeholder="输入姓名" v-model="fullNameOne"> </input></label>
<p>------------------双向绑定-------------------------</p>
<label>姓名 <input type="text" placeholder="输入姓名" v-model="fullNameTwo"> </input></label>
<p>------------------单向绑定-------------------------</p>
<label>姓名 <input type="text" placeholder="输入姓名" v-model="fullNameThree"> </input></label>
</div>
</template>
<script>
export default {
name: "ComputedAndWatch",
data(){
return{
firstName:'',
lastName:'',
fullNameThree:'',
}
},
computed:{
fullNameOne:{
get(){
return this.firstName+'.'+this.lastName;
}
},
fullNameTwo:{
get(){
return this.firstName+'.'+this.lastName;
},
set(value){
let names = value.split('.');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch:{
//watch监听属性,监听firstName和lastName属性发生变法,执行的方法,方法名称就是该属性名称
firstName(value){
console.log(`姓发生了变化${value}`);
this.fullNameThree = value + this.lastName;
},
lastName(value){
console.log(`姓发生了变化${value}`);
this.fullNameThree = this.firstName + value;
}
}
}
</script>
<style scoped>
</style>