-
computed: 计算属性将基于它们的响应依赖关系缓存,本质上是为了简化模版中的逻辑
const firstName = ref("Mir");
const secondName= ref("joy");
const fullName = computed(()=> firstName.value +" "+secondName.value)
支持set方法：
let fullName = computed({
get: () => firstName.value +" "+secondName.value,
set: val => {
console.log("...")
firstName.value = val.split(" ")[0];
secondName.value = val.split(" ")[1];
}
});
fullName.value = "hong xingshi"
{{fullName}} {{fullName}}
模版引用两次，但是只会执行一次运算,只有当firstName和secondName变化时才会重新计算； 如果是普通函数就会执行两次运算
支持调试Computed,仅开发模式生效：
const plusOne = computed(() => count.value + 1, {
onTrack(e) {
// 当 count.value 作为依赖被追踪时触发
debugger
},
onTrigger(e) {
// 当 count.value 被修改时触发
debugger
}
})
// 访问 plusOne，应该触发 onTrack
console.log(plusOne.value)
// 修改 count.value，应该触发 onTrigger
count.value++
-
watch: 监听属性用于监听属性的变化，监听属性范围更广，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
1.监听单一源
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* 执行异步或者开销较大的操作，比如获取发起后端请求*/
}
)
// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
2.监听多个源
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
/* ... */
})
3.尝试检查深度嵌套对象或数组中的 property 变化时，仍然需要 deep 选项设置为 true
const state = reactive({
id: 1,
attributes: {
name: '',
}
})
watch(
() => state,
(state, prevState) => {
console.log('not deep', state.attributes.name, prevState.attributes.name)
}
)
watch(
() => state,
(state, prevState) => {
console.log('deep', state.attributes.name, prevState.attributes.name)
},
{ deep: true }
)
state.attributes.name = 'Alex' // 日志: "deep" "Alex" "Alex"
//{ immediate: true} 代表立即以表达式的当前值触发回调
-
watchEffect是vue3新特性，立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数，函数用到哪个属性就监听哪个属性
const count = ref(0)
watchEffect(() => console.log(count.value))
// -> logs 0
setTimeout(() => {
count.value++
// -> logs 1
}, 100)
1.computed注重返回结果，watch和watchEffect注重过程不需要返回值
2.watch和watchEffect 支持异步调用 computed不支持
3.watch 可以访问监听属性的先前值和当前值，而watchEffect只能访问到当前值
4.watchEffect函数支持取消异步api的请求和停止监听