computed函数:
与computed配置功能一致
当回调中只有一个函数的时候只有getter
有getter和setter
const fullName1=computed(() => {
console.log('fullName1')
return user.firstName + '-' + user.lastName
})
const fullName2 = computed({
get () {
console.log('fullName2 get')
return user.firstName + '-' + user.lastName
},
set (value: string) {
console.log('fullName2 set')
const names = value.split('-')
user.firstName = names[0]
user.lastName = names[1]
}
})
watch函数
与watch配置功能一致
监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
通过配置deep为true, 来指定深度监视
实现首次进入就执行watch
const fullName3 = ref('')
watch(user, () => {
fullName3.value = user.firstName + '-' + user.lastName
}, {
immediate: true, // 是否初始化立即执行一次, 默认是false
deep: true, // 是否是深度监视, 默认是false
})
//相当于
/* watchEffect(()=>{
fullName3.value=user.firstName+'-'+user.lastName
})*/
watch(fullName3,(value)=>{
console.log("watch");
const names = value.split('-')
user.firstName = names[0]
user.lastName = names[1]
},)
watchEffect函数
不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
默认初始时就会执行第一次, 从而可以收集需要监视的数据
监视数据发生变化时回调
watchEffect(()=>{
fullName3.value=user.firstName+'-'+user.lastName
})