【4.0】vue3中的属性
【一】计算属性computed
- export default中的computed属性
【1】单向计算属性computed
-
案例:输入姓和名,拼接得到姓名(但是姓名反过来显示性和名就报错)
person.fullname=computed(function(){
return person.fistname+person.lastname
})
#由于person.fistname+person.lastname会变,所以函数会自己变
<template>
<div class="about">
<h3>姓和名组合</h3>
<h4>请输入您的姓:<input type="text" v-model="person.fistname"> </h4>
<h4>请输入您的名:<input type="text" v-model="person.lastname"> </h4>
<h4>您的全名:<input type="text" v-model="person.fullname"> </h4>
</div>
</template>
<script>
import {ref, reactive, computed} from "vue";
export default {
name:'AboutView',
setup(){
//定义姓名函数
const person=reactive({fistname:'',lastname:''})
//定义pserson的fullname属性
person.fullname=computed(function(){
return person.fistname+person.lastname
})
return {person}
},
}
</script>
【2】双向计算属性set和get
-
类似变量1=变量2+变量3,当变量2和3变化时候1肯定变,现在1变带着2和3变
-
get是后面变前面在变,set是后面变(根据值分解参数)
person.fullName = computed({
get() {
return person.firstName + person.lastName},
set(value) {
person.firstName = value.slice(0, 1)
person.lastName = value.slice(1)}
<template>
<div class="about">
<h3>姓和名组合</h3>
<h4>请输入您的姓:<input type="text" v-model="person.fistname"> </h4>
<h4>请输入您的名:<input type="text" v-model="person.lastname"> </h4>
<h4>您的全名:<input type="text" v-model="person.fullname"> </h4>
</div>
</template>
<script>
import {ref, reactive, computed} from "vue";
export default {
name:'AboutView',
setup(){
//定义姓名函数
const person=reactive({fistname:'',lastname:''})
// const fullname=ref('')
person.fullname=computed(
{ get(){
return person.fistname+person.lastname},
set(value){
person.fistname=value.slice(0,1)
person.lastname=value.slice(1)
return person.fistname,person.lastname}
})
return {person}
},}
</script>
【二】监听属性watch
【1】总结watch(value,(newValue, oldValue))
-
export default中的watch方法,放入watch中的值或者变量可以被监听,只要变化就会触发该函数,并且有俩参数(修改前,修改后)
watch(height, (newValue, oldValue) => {
console.log('height变化了', newValue, oldValue)
})
watch([变量1, 变量2], (newValue, oldValue) => {
console.log('1或2变化了', newValue, oldValue)
})
【2】监听值类型
<template>
<div class="about">
<h3>监听值类型{{height}}</h3>
<button @click="heightadd">点我增加身高</button>
</div>
</template>
<script>
import {ref, reactive, computed, watch} from "vue";
export default {
name:'AboutView',
setup(){
//监听值类型
const height=ref(180)
//监听函数
watch(height,(newvalue,oldvalue)=>{
console.log(newvalue)
console.log(oldvalue)})
//变化函数
function heightadd(){
height.value++
}
return {count,add,user_info,changename,person,height,heightadd}
},}
</script>
【2】监听对象类型
<h3>监听对象类型{{user}}</h3>
<button @click="changeuser">点我换人</button>
//监听对象类型
const user=reactive({username:'zhou',age:18})
watch(user,(newvalue,oldvalue)=>{
console.log(newvalue)
console.log(oldvalue)
})
function changeuser(){
user.username='zhou6'
user.age++
}
【3】多个变量一起监听
const sum = ref(100)
const msg = ref('很好')
function changeValue(){
sum.value++
msg.value='不太好'
}
watch([sum, msg], (newValue, oldValue) => {
console.log('sum或msg变化了', newValue, oldValue)
})
【4】watchEffect函数
-
不需要指定监听谁,只要变量在watchEffect内部使用了,当这个变量发生变化了,就会触发
-
wacth更适用于需要有条件监听数据变化的场景,computed更适合用于创建派生数据和性能优化,wactheffect会追踪函数内部的所有值,消耗比较大
-
如果多个都同时变化,只会执行一次
watchEffect(() => { const x1 = sum.value const x2 = person.name console.log('watchEffect配置的回调执行了') })