1. computed
- 只有一个回调函数,表示 get 方法
- get 和 set 方法
<template>
<fieldset>
<legend>输入</legend>
<input type="text" placeholder="输入名字" v-model="user.firstName">
<input type="text" placeholder="输入名字" v-model="user.lastName">
</fieldset>
<fieldset>
<legend>回显</legend>
<input type="text" placeholder="显示名字" v-model="fullName1">
<input type="text" placeholder="显示名字" v-model="fullName2">
</fieldset>
</template>
<script lang="ts">
import { reactive, computed, ref } from 'vue'
export default {
setup(props) {
const user = reactive({
firstName:'东方',
lastName:'不败'
})
const fullName1 = computed(() => {
return user.firstName + user.lastName
})
const fullName2 = computed({
get(){
return user.firstName + '_' + user.lastName
},
set(val){
console.log(val);
const names = val.split('_')
user.firstName = names[0]
user.lastName = names[1]
}
})
return {
user,
fullName1,
fullName2
}
}
}
</script>
2. watch和watchEffect
- watchEffect 方法,不需要配置 immediate:true,默认会执行一次
- watch 方法,可以监听多个数据,非响应式数据使用回调方式
<template>
<fieldset>
<legend>输入</legend>
<input type="text" placeholder="输入名字" v-model="user.firstName">
<input type="text" placeholder="输入名字" v-model="user.lastName">
</fieldset>
<fieldset>
<legend>回显</legend>
<input type="text" placeholder="显示名字" v-model="fullName3">
</fieldset>
</template>
<script lang="ts">
import { reactive, ref, watchEffect, watch } from 'vue'
export default {
setup(props) {
const user = reactive({
firstName:'东方',
lastName:'不败'
})
const fullName3 = ref('')
watchEffect(() => {
fullName3.value = user.firstName + user.lastName
})
watch([()=>user.firstName,()=>user.lastName,fullName3], () => {
console.log('111111111');
})
return {
user,
fullName3
}
}
}
</script>