vue3 ref，shallowRef, triggerRef, customRef
ref深层次响应
变成响应式
JavaScript
const name = ref('refName')
name.value = 'newName'shallowRef浅层次响应
JavaScript
const obj = shallowRef({ name: 'shallowRefName' })
obj.value = { name: 'newName' } // 响应式
obj.value.name = 'newName' // 非响应式，视图不刷新triggerRef主动触发一次更新
JavaScript
const obj = shallowRef({ name: 'shallowRefName' })
obj.value = { name: 'newName' } // 响应式
obj.value.name = 'newName' // 非响应式，视图不刷新
triggerRef(obj) // 重新触发一次视图刷新customRef自定义ref
JavaScript
function custom(value) {
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newVal) {
value = newVal
trigger()
}
}
})
}
// 返回一个ref对象
const name = custom('customRefName')
name.value = 'customNewRefName' // 触发了set方法，视图更新
