一、计算属性
计算属性是一种特殊的响应式属性,它们根据响应式依赖项的值计算得出。计算属性非常适合用于当你需要根据现有数据派生出一些状态时,它们是缓存的,只有当依赖项改变时才会重新计算。
<div id="app">
性:<input type="text" v-model="firstName1">
名:<input type="text" v-model="lastName1">
姓名:<input type="text" v-model="username1"><br><br>
性:<input type="text" v-model="firstName2">
名:<input type="text" v-model="lastName2">
姓名:<input type="text" v-model="username2"><br><br>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
firstName1:'',
lastName1:'',
firstName2:'',
lastName2:'',
}
},
computed:{//计算属性
username1(){ //构建函数,在计算属性中调用函数
return this.firstName1+''+ this.lastName1
},
username2:{
get(){
return this.firstName2+''+ this.lastName2
},
set(val){//"张 三"
let strArr = val.split("")//['张','三']
this.firstName2=strArr[0]
this.lastName2=strArr[1]
}
}
}
}).mount("#app")
</script>
二、监视属性
在Vue 3中,响应式系统进行了全面的重写,并引入了Composition API,这为监视属性(或称为响应式数据)提供了更加灵活和强大的方式。Vue 3使用Proxy
代替了Vue 2中的Object.defineProperty
,这使得响应式系统能够拦截更多类型的操作,如数组索引的修改和属性的添加/删除等。
在Vue 3中,你可以使用watch
或watchEffect
来监视属性的变化。这两个API都是vue
库的一部分,在Composition API中使用时需要从vue
中显式导入。
使用watch:
<div id="app">
姓:<input type="text" v-model="firstName">
名:<input type="text" v-model="lastName">
姓名:<input type="text" v-model="username"><br><br>
</div>
<script>
const {createApp} = Vue
createApp({
data(){
return{
firstName:'',
lastName:'',
username:''
}
},
watch:{
username(newVal,oldVal){ //参数一:新的数据;参数二:旧的数据
if(newVal!=''){
let strArr = newVal.split("")
this.lastName = strArr[0]
this.firstName = strArr[1]
}else{
this.lastName = ''
this.firstName = ''
}
}
}
}).mount("#app")